Crop and show result with canvas

问题

I'm trying to work with jCrop and canvas.

Instead of sending the image to the server and back again with a cropped image, I'm trying to crop it directly, using canvas, because with the result, I transform the crop in a base64 image and send to the server.

The result I get using drawImage from canvas.

But the problem is:

I set the image to 400x400, but the original image is much bigger then that and I think the canvas is getting the size directly from the original image, and not the one that I determine, so the result is nothing like the crop.

i made a example with the exact problem.

Demo

just crop the image and then click CROP.

What I'm missing?

Edit: I change to a 320x320 image, and look's like the crop work fine, but with other's images that are not square, nothing work.

回答1:

You can find coordinates on the original image by dividing original dimensions of the image by its current size on the page, then multiply coordinates of the crop rectangle by this ratio.

var img = document.getElementById("canvasToThumb"),
    $img = $(img),
    imgW = img.width,
    imgH = img.height;

var ratioY = imgH / $img.height(),
    ratioX = imgW / $img.width();

var getX = $('#x').val() * ratioX,
    getY = $('#y').val() * ratioY,
    getWidth = $('#w').val() * ratioX,
    getHeight = $('#h').val() * ratioY;

jsFiddle - http://jsfiddle.net/s39P3/

来源：https://stackoverflow.com/questions/15075739/crop-and-show-result-with-canvas