使用图像坐标裁剪图像

Question

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.

I tried the following 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

Where logo is the ID of my image tag.

By using this code cropped image is not correct.

Can anyone help me?

Answer 1

Use this technique for image cropping in HTML5

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

Go to --> http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

You will get plenty of tricks.

Answer 2

You can achieve the same effect like this.

HTML:

<div class="crop">
    <img class="photo" src="http://placekitten.com/400/200" />
</div>

CSS:

.crop {
    overflow: hidden;
    width: 150px; /* crop width */
    height: 150px; /* crop height */
}

.photo {
    margin-top: -20px; /* start x */
    margin-left: -50px; /* start y */
}

Demo