Question

无论如何我可以使用原始javascript裁剪图像吗？我希望能够获得一个带有特定宽度，高度，偏移量X和偏移量Y的图像（html标记或源或其他）的函数，并创建指定部分的图像。

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

我希望这很清楚。感谢。

Answer 1

如果只需要显示图像的一部分，请使用css clip：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 +吗？

如何仅使用Javascript裁剪图像？

3 个答案: