如何仅使用Javascript裁剪图像?

时间:2012-07-11 14:52:04

标签: javascript image html5 browser crop

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

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

我希望这很清楚。 感谢。

3 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:3)

通常,通过使用CSS样式设置渲染限制就足以使图像显示为裁剪。

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

xy替换为您要显示的顶部/左侧偏移量。

答案 2 :(得分:1)

试试这个:

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 +吗?