javascript - 如何仅使用 Javascript 裁剪图像？

Question

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

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

我希望这很清楚。谢谢。

Answer 1

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

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

Answer 2

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

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

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

Answer 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+ 吗？