使用Javascript以编程方式剪辑/剪切图像

Question

是否有关于如何剪切或剪切大图像的文档/教程,以便用户只能看到该图像的一小部分？假设源图像是10帧动画,端对端堆叠,因此它非常宽.我怎么能用Javascript一次只显示1个任意帧的动画？

我已经研究过这种"CSS Spriting"技术,但我认为我不能在这里使用它.源图像是从服务器动态生成的; 在从服务器返回之前,我不知道每个帧的总长度或大小.我希望我可以这样做:

var image = getElementByID('some-id');

image.src = pathToReallyLongImage;

// Any way to do this?!
image.width = cellWidth;
image.offset = cellWidth * imageNumber;

Answer 1

这可以通过将图像封闭在"视口"div中来完成.在div上设置宽度和高度(根据您的需要),然后设置position: relative并overflow: hidden在其上.绝对将图像放在其中并更改位置以更改显示的部分.

要显示从(10,20)开始的图像的30x40部分:

<style type="text/css">
    div.viewport {
        overflow: hidden;
        position: relative;
    }

    img.clipped {
        display: block;
        position: absolute;
    }
</style>

<script type="text/javascript">
    function setViewport(img, x, y, width, height) {
        img.style.left = "-" + x + "px";
        img.style.top  = "-" + y + "px";

        if (width !== undefined) {
            img.parentNode.style.width  = width  + "px";
            img.parentNode.style.height = height + "px";
        }
    }

    setViewport(document.getElementsByTagName("img")[0], 10, 20, 30, 40);
</script>

<div class="viewport">
    <img class="clipped" src="/images/clipped.png" alt="Clipped image"/>
</div>

常见的CSS属性与类相关联,因此您可以在页面上拥有多个视口/剪切图像.setViewport(…)可以随时调用该函数来更改图像的哪个部分显示.