Question

我正在尝试使用jCrop和canvas。

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

我在画布中使用drawImage的结果。

但问题是：

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

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

Demo

只裁剪图像，然后点击CROP。

我缺少什么？

编辑：我更改为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/

使用画布裁剪并显示结果

1 个答案: