使用画布裁剪并显示结果

Question

我正在尝试与jCrop和一起工作canvas。

我尝试使用画布直接将其裁剪，而不是将图像发送到服务器并通过裁剪的图像再次返回，因为这样做的结果是，我将裁剪的base64图像转换为图像并发送到服务器。

我drawImage从画布上使用的结果。

但是问题是：

我将图像设置为400x400，但是原始图像要大得多，并且我认为画布直接从原始图像获取尺寸，而不是我确定的尺寸，因此结果与裁剪完全不同。

我做了一个确切的问题的例子。

演示版

只需裁剪图像，然后单击“剪裁”即可。

我缺少什么？

编辑：我更改为一个320x320的图像，看起来像裁剪效果很好，但与其他不是正方形的图像，没有任何效果。

Answer 1

您可以通过以下方式找到原始图像上的坐标：将图像的原始尺寸除以页面上当前的尺寸，然后将裁剪矩形的坐标乘以该比例。

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/