是否有任何关于如何剪辑或剪切大图像以使用户只能看到该图像的一小部分的文档/教程？假设源图像是 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;
【问题讨论】：
标签： javascript image
文档图像对象的宽度/高度属性是只读的。然而，如果你可以改变它们，你只会挤压框架，而不是像你想要的那样切割框架。您想要的那种图像处理无法使用客户端 javascript 完成。我建议在服务器上剪切图像，或者在图像上覆盖一个 div 以隐藏您不希望显示的部分。
【讨论】：
这可以通过将您的图像包含在“视口”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(…)函数来改变图片的显示部分。
【讨论】：
overflow: hidden: 行的末尾有一个冒号，不幸的是我无法更改它，因为它只有一个字母编辑...
精灵所做的本质上是将一个绝对定位的 DIV 定位在另一个具有溢出：隐藏的 DIV 中。您也可以这样做，您需要做的就是根据较大图像的每一帧的大小调整外部 DIV 的大小。您可以轻松地在代码中做到这一点。
你可以只设置内部 DIV 的样式：
left: (your x-position = 0 or a negative integer * frame width)px
大多数 JavaScript 框架使这变得非常容易。
【讨论】：
CSS 还定义了一种剪裁样式。请参阅 CSS 规范中的 clip 属性。
【讨论】：
唉，JavaScript 根本无法提取执行此类操作所需的图像属性。但是，HTML
用于提取真正大图像的宽度和高度的 PHP 代码：
<?php
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
?>
从这里，您可以将图像加载到
这个方法唯一的推测是 JavaScript 是否能够从加载到
【讨论】：
我想您想为您的图像拍摄缩略图。您可以通过这种方式使用从原型库创建的 ImageThumbnail.js：
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="ImageThumbnail.js"></script>
<input type="file" id="photo">
<img src="empty.gif" id="thumbnail" width="80" height="0">
<script type="text/javascript">
<!--
new Image.Thumbnail('thumbnail', 'photo');
//-->
</script>
了解更多information
【讨论】：
回答：
唉，JavaScript 根本无法提取执行此类操作所需的图像属性。但是，HTML 元素与一些服务器端脚本相结合的形式可能会有所帮助。 ...
< ? (open php)
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
(close php) ? >
这可以在 Javascript 中完成，只需 google 一下：
var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width = newimage.width;
这会从现有图像生成新图像，并以这种方式在 java 脚本中捕获原始图像的原始高度和宽度属性（而不是作为背景的图像。
回答：
文档图像对象的宽度/高度属性是只读的。然而，如果你可以改变它们，你只会挤压框架，而不是像你想要的那样切割框架。您想要的那种图像处理无法使用客户端 javascript 完成。我建议在服务器上剪切图像，或者在图像上覆盖一个 div 以隐藏您不希望显示的部分。
...
var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width = newimage.width;
newimage.style.height = '200px';
newimage.style.width = '200px';
newimage.height = '200px';
newimage.width = '200px';
如果需要的话：
newimage.setAttribute('height','200px');
在某些情况下需要加倍的 newimage.style.height 和 newimage.height 以确保 IE 及时了解图像已调整大小（您将在之后立即渲染该内容，而内部IE 处理太慢了。）
感谢上面的脚本，我在http://morethanvoice.net/m1/reader13.php（右键菜单...鼠标悬停放大）上进行了修改和实现，即使在 IE 中也是正确的，但是您会注意到，对于旧样式的 IE，on mousemove 图像处理速度太快了, 渲染位置，但只渲染一次图像。无论如何，欢迎任何好主意。
感谢大家的关注，希望以上代码可以帮助到大家...
【讨论】：
尝试通过简单的函数使用haxcv库haxcv js
去https://docs.haxcv.org/Methods/cutImage阅读更多关于他的图书馆的信息
var Pixels = _("img").cutImage (x , y , width , height );
_("img").src (Pixels.src);
// 返回剪切图像 但请先尝试包含库
【讨论】：