使用画布裁剪并显示结果

Posted 2023-02-25

【中文标题】使用画布裁剪并显示结果

【英文标题】：Crop and show result with canvas

【发布时间】：2013-02-25 20:19:50

【问题描述】：

我正在尝试使用 jCrop 和 canvas。

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

我在画布上使用drawImage 得到的结果。

但问题是：

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

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

Demo

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

我错过了什么？

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

【参考方案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/