javascript - 使用图像坐标裁剪图像

Question

我有裁剪图像的坐标位置(x1，y1，x2，y2，宽度和高度)我将这些值传递给表单的模态元素。我想以 150x150 的尺寸显示裁剪后的图像。

我试过下面的代码，

var rx = xsize / (x2-x1);
var ry = ysize / (y2-y1);

document.getElementById('logo').style.width=Math.round(rx * boundx) + 'px';//No I18N
document.getElementById('logo').style.height=Math.round(ry * boundy) + 'px';//No I18N
document.getElementById('logo').style.marginLeft= '-' + Math.round(rx * x1) + 'px';//No I18N
document.getElementById('logo').style.marginTop= '-' + Math.round(ry * y1)+ 'px';//No I18N

其中 logo 是我的图片标签的 ID。

使用此代码裁剪的图像不正确。

谁能帮帮我？

Answer 1

在 HTML5 中使用此技术进行图像裁剪

玩图尽量用canvas，在canvas上操作很简单。

转到 --> http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

你会得到很多技巧。