当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《使用Javascript以编程方式剪辑/剪切图像》经验,为你挑选了1个好方法。

是否有关于如何剪切或剪切大图像的文档/教程,以便用户只能看到该图像的一小部分?假设源图像是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;

Ben Blank.. 25

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

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





Clipped image

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



1> Ben Blank..:

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

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





Clipped image

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

推荐阅读
臭小子
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有