是否有关于如何剪切或剪切大图像的文档/教程，以便用户只能看到该图像的一小部分？假设源图像是10帧动画，堆叠端到端，因此非常宽。我能用Javascript做什么，一次只显示一个任意框架的动画？使用Javascript以编程方式剪切/剪切图像
我已经看过这个“CSS Spriting”技术，但我不认为我可以在这里使用它。源图像是从服务器动态生成的;我不知道每个帧的总长度或大小，直到它从服务器返回。我希望我可以这样做：只读取文档的图像对象的
var image = getElementByID('some-id');
image.src = pathToReallyLongImage;
// Any way to do this?!
image.width = cellWidth;
image.offset = cellWidth * imageNumber;
这可以通过将您的图像封闭在“视口”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(…)函数来更改显示图像的哪一部分。
宽度/高度属性。但是，如果你可以改变它们，你只会挤压框架，而不是像你想要的那样剪掉框架。您想要的图像处理类型不能用客户端JavaScript来完成。我建议在服务器上剪切图像，或者在图像上叠加一个div以隐藏不希望显示的部分。
是的，如果你要裁剪你需要把它放在另一个元素中（DIV是最常见的）的图像，然后设置将此元素溢出为隐藏状态，并将其中的图像移动到其中，同时考虑将图像用作背景。 – 2009-01-26 21:20:28
我们有一个实现只提供单个图像的实现，并且有一些AJAX可以动态获取它们。但是，我们希望加载一个大的图像并将其剪切在客户端将会产生更好的用户体验...... – 2009-01-26 21:25:21
spriting的功能基本上是将绝对定位的DIV放置在另一个溢出的DIV中：隐藏。您也可以做同样的事情，您只需根据较大图像的每个帧的大小调整外部DIV的大小。你可以用代码轻松做到这一点。
您可以只设置内部DIV的风格：
left: (your x-position = 0 or a negative integer * frame width)px
大多数JavaScript框架使这很容易。
CSS还定义了一个裁剪样式。查看CSS规范中的剪辑属性。
唉，JavaScript根本无法提取您需要执行此类操作所需的图像属性。但是，可能会有HTML < canvas>元素与少量服务器端脚本相结合的形式。
PHP代码去提取真正的大图像的宽度和高度：
<?php
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
?>
从这里，你会然后将图像加载到< canvas>元素，其中一个例子是记录here。现在，我的理论是，你可能能够从一个< canvas>元素中提取像素数据;假设您可以，您只需确保在大图像的帧之间具有某种形式的明确分隔符，然后在画布内搜索它。假设您从图像的左侧找到110个像素的分隔符;那么你就会知道每个“帧”的宽度是110像素，而且你已经将整个宽度存储在一个PHP变量中，所以解读你使用的图像会变得轻而易举。
这种方法唯一推测的方面是JavaScript是否能够从加载到一个< canvas>元素的图像中的指定位置提取颜色数据;如果这是可能的，那么你试图完成的是完全可行的。
我想你想要为你的图像缩略图。您可以使用从原型库以这种方式创建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>
在回答：
唉，JavaScript的根本不能够提取的属性你需要这样做的图像。但是，可能会有HTML元素的形式与一些服务器端脚本相结合的救赎。 ...
< ? (open php)
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
(close php) ? >
这可以在Javascript中完成，只是谷歌了一下：
var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width = newimage.width;
这产生从现有的一个新的图像和Java脚本的原始捕获这样原始图像的高度和宽度属性（不是以id'ed作为背景的）
回答：
文档的图像对象的宽度/高度属性是只读的。但是，如果你可以改变它们，你只会挤压框架，而不是像你想要的那样剪掉框架。您想要的图像处理类型不能用客户端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（鼠标右键菜单... mouseover zoom lent），即使在IE中也是正确的，但是你会注意到鼠标移动图像处理对于旧式IE来说太快了，只能渲染一次图像的位置。无论如何，任何好主意都是值得欢迎的。
感谢大家的关注，希望上面的代码可以帮助别人......
克劳迪奥·Klemp http://morethanvoice.net/m1/reader13.php
尝试使用haxcv库haxcv JS通过简单的功能
去https://docs.haxcv.org/Methods/cutImage阅读更多关于他的图书馆
var Pixels = _("img").cutImage (x , y , width , height );
_（ “IMG”）。SRC（ Pixels.src）;
//返回剪切图像 但尽量包括图书馆第一
非常酷。几乎立即工作。只有你的代码的问题是，当它应该使用'y'时，img.style.top使用'x'参数，左边是同样的东西。除此之外，工作就像一个魅力！ – 2009-01-26 21:35:40