裁剪图像的图像坐标使用 [英] Cropping image using coordinates of the image

问题描述

我有裁剪图像（X1，Y1，X2，Y2，宽度和高度）的坐标位置
我传递这些价值模态窗体的元素。
我想在150×150尺寸显示裁剪后的图像。

I have the coordinates position of a cropped image (x1,y1,x2,y2,width and height) I am passing these value to modal element of a form. I want to display the cropped image in 150x150 dimensions.

我尝试以下code，

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

在哪里的标志是我的形象标签的ID。

Where logo is the ID of my image tag.

通过使用这种code裁剪图像是不正确的。

谁能帮我？

推荐答案

使用此技术在图像裁剪HTML5

有关处理图像播放尝试用帆布，帆布上的操作是很容易的。

For playing with images try to use canvas, operation on canvas are quite easy.

进入 - > http://www.html5canvastutorials.com/教程/ HTML5的画布图像作物/

您将获得大量的技巧。

这篇关于裁剪图像的图像坐标使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！