0

我正在尝试使用jCropand canvas。

我没有将图像发送到服务器并使用裁剪图像再次返回，而是尝试使用画布直接裁剪它，因为结果，我将裁剪转换为base64图像并发送到服务器。

我drawImage从画布上得到的结果。

但问题是：

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

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

演示

只需裁剪图像，然后单击 CROP。

我错过了什么？

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

4

1 回答 1

5

您可以通过将图像的原始尺寸除以其在页面上的当前大小来找到原始图像上的坐标，然后将裁剪矩形的坐标乘以该比率。

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/

于 2013-02-25T21:19:27.177 回答