无论如何我可以使用原始javascript裁剪图像吗?我希望能够获得一个带有特定宽度,高度,偏移量X和偏移量Y的图像(html标记或源或其他)的函数,并创建指定部分的图像。
我不熟悉HTML5画布等,但我需要支持旧浏览器,所以这甚至都不是一个选项(我知道这很糟糕)。
我希望这很清楚。 感谢。
答案 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
将x
和y
替换为您要显示的顶部/左侧偏移量。
答案 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 +吗?