如何仅使用 Javascript 裁剪图像？答案

【问题标题】：How can I crop an image using only Javascript?如何仅使用 Javascript 裁剪图像？
【发布时间】：2012-07-11 05:33:35
【问题描述】：

无论如何我可以使用原始 javascript 裁剪图像吗？我希望能够有一个函数来获取具有特定宽度、高度、offsetX 和 offsetY 的图像（html 标签或源或其他），并创建指定部分的图像。

我对 HTML5 画布等不太熟悉，但我需要支持旧版浏览器，所以这甚至不是一个选择（我知道这很糟糕）。

我希望这很清楚。谢谢。

【问题讨论】：

您需要简单地显示裁剪的部分，还是用它做其他事情，即上传它？你可以用 CSS clip 做前者，但你只能用 canvas 做后者。
Canvas 似乎是唯一的选择。

标签： javascript image html browser crop

【解决方案1】：

如果您只需要显示图像的一部分，请使用 css 剪辑：https://developer.mozilla.org/en/CSS/clip。即使禁用了 JavaScript，也可以在 IE6+ 中使用。

如果您需要对图像进行物理裁剪，并且需要 IE6 支持，那么您的选择是 Flash 或将数据和裁剪值发送到返回裁剪图像的服务器。

【讨论】：

不幸的是，我需要对图像进行物理裁剪。看起来这仅使用 JS 是不可行的。
有可能，JS加画布，大功告成。另外，放弃对 IE6 的支持。

【解决方案2】：

通常，通过使用 CSS 样式设置渲染限制以使图像看起来被裁剪就足够了。

不要使用img，而是使用div。将所需大小分配给div。将属性background 设置为-x -y url('...url-of-your-image...') no-repeat

将x 和y 替换为您要显示的上/左偏移量。

【讨论】：

这实际上是我前进的方向。但是由于我在我的 web 应用程序中经常使用图像（即 div），所以 DOM 快速增长，因此浏览器性能受到很大影响。
如果图片URL相同，浏览器应该重用它：-/

【解决方案3】：

试试这个：

function crop(img_id, crop_id, x, y, width, height) {
  $(crop_id).update('<img id="' + crop_id + '_img" src="' +
      $(img_id).getAttribute('src') + '" style="display:none" />');

  var scale_x = $(crop_id).getWidth() / width;
  var scale_y = $(crop_id).getHeight() / height;

  $(crop_id).setStyle({
    position: 'relative',
    overflow: 'hidden' 
  });

  $(crop_id + '_img').setStyle({
    position: 'absolute',
    display: 'block',
    left: (-x * scale_x) + 'px',
    top: (-y * scale_y) + 'px',
    width: ($(img_id).getWidth() * scale_x) + 'px',
    height: ($(img_id).getHeight() * scale_y) + 'px'
  });
}

问题：需要 Jquery，并且可能该解决方案适用于 IE8+.... 你需要 IE6+ 吗？

【讨论】：

是的，我愿意。似乎这个函数只操纵 css 来显示图像的一部分，而我想实际裁剪它。我知道有支持这一点的服务器端语言（如 java），但是 javascript 呢？我好像暂时没有。