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

这可以通过将图像封装在“viewport”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(…)函数来更改图像的哪个部分显示。

Answer 2

回答：

唉，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。）。

回答：

文档图像对象的宽度/高度属性是只读的。但是，如果你可以改变它们，你只会挤压框架，而不是像你想要的那样剪切框架。您想要的图像处理类型无法通过客户端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，呈现位置但只有一次图像。无论如何，欢迎任何好主意。

感谢所有人的关注，希望上述代码可以帮助某人...

Claudio Klemp http://morethanvoice.net/m1/reader13.php

Answer 3

CSS还定义了剪裁样式。请参阅CSS规范中的剪辑属性。

Answer 4

唉，JavaScript根本无法提取您需要执行此类操作所需的图像属性。但是，可能会以HTML＆lt; canvas＆gt;形式出现拯救。元素与一些服务器端脚本相结合。

用于提取真正大图像的宽度和高度的PHP代码：

<?php
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
?>

然后，您可以将图像加载到＆lt; canvas＆gt;元素，其中一个例子记录在here。现在，我的理论是你可以从＆lt; canvas＆gt;中提取像素数据。元件;假设你可以，你只需要确保在大图像的帧之间有某种形式的明确分隔符，然后在画布中搜索它。假设您发现图像左侧110像素的分隔符;然后你会知道每个“框架”的宽度是110像素，并且你已经将整个宽度存储在一个PHP变量中，所以破译你正在使用的图像将是轻而易举的。

此方法唯一的推测方面是JavaScript是否能够从加载到＆lt; canvas＆gt;的图像中的指定位置提取颜色数据。元件;如果这是可能的，那么你想要完成的事情是完全可行的。

Answer 5

文档图像对象的宽度/高度属性是只读的。但是，如果你可以改变它们，你只会挤压框架，而不是像你想要的那样剪切框架。您想要的图像处理类型无法通过客户端javascript完成。我建议在服务器上剪切图像，或在图像上叠加div以隐藏您不希望显示的部分。

Answer 6

spriting的作用基本上是将绝对定位的DIV放在另一个有溢出的DIV中：隐藏。您可以这样做，您需要做的就是根据较大图像的每个帧的大小调整外部DIV的大小。您可以轻松地在代码中执行此操作。

你可以设置内部DIV的风格：

left: (your x-position = 0 or a negative integer * frame width)px

大多数JavaScript框架都非常容易。

Answer 7

我想你想为你的图像拍一个缩略图。您可以使用以这种方式从原型库创建的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

Answer 8

尝试通过简单的函数使用haxcv库haxcv js

转到https://docs.haxcv.org/Methods/cutImage阅读有关其图书馆的更多信息

var Pixels = _("img").cutImage (x , y , width , height  );

_（＆＃34; img＆＃34;）。src（Pixels.src）;

//返回剪切图像但是首先尝试包含库

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

8 个答案: