使用Javascript编程剪辑/剪切图像

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

针对以下问题:

唉,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脚本中捕获原始图像的原始高度和宽度属性(而不是作为背景的图像)。

针对以下问题:

文档图像对象的宽度/高度属性是只读的。然而,如果你能改变它们,你只会压扁框架,而不是像你想要的那样把框架切开。您想要的图像操作无法使用客户端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来说太快了,只渲染一次图像。无论如何,任何好主意都是受欢迎的。

感谢大家的关注,希望以上代码能对大家有所帮助。..

克劳迪奥·克伦普 http://morethanvoice.net/m1/reader13.php

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

文档图像对象的宽度/高度属性是只读的。然而,如果你能改变它们,你只会压扁框架,而不是像你想要的那样把框架切开。您想要的图像操作无法使用客户端javascript完成。我建议在服务器上剪切图像,或者在图像上叠加一个div来隐藏不希望显示的部分。

spriting所做的基本上是将一个绝对定位的DIV放置在另一个具有溢出:隐藏的DIV中。你也可以这样做,你需要做的就是根据较大图像的每一帧的大小调整外部DIV的大小。你可以在代码中轻松做到这一点。

您可以设置内部DIV的样式:

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

大多数JavaScript框架都很容易做到这一点。

唉,JavaScript根本无法提取图像的属性,你需要这样做。然而,HTML的形式可能会带来救赎<画布>元素与一点服务器端脚本相结合。

用于提取超大图像的宽度和高度的PHP代码:

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

从这里开始,您可以将图像加载到<画布>元素,其示例已记录在案 here 现在,我的理论是,你可能能够从<画布>元素;假设可以,您只需确保在大图像的帧之间有某种形式的明确分隔符,然后在画布内搜索它。假设你在图像左侧找到了110像素的分隔符;然后,你会知道每个“帧”的宽度为110像素,并且你已经将整个宽度存储在PHP变量中,因此破译你正在处理的图像量将是一件轻而易举的事。

该方法的唯一推测方面是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

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

首选 https://docs.haxcv.org/Methods/cutImage 阅读更多关于他的图书馆的信息

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

_(“img”).src(像素.src);

//返回剪切图像 但尽量先包括图书馆