使用画布裁剪和显示结果 [英] Crop and show result with canvas

问题描述

我正在尝试使用 jCrop 和画布。

而不是发送图像到服务器，并回到一个裁剪的图像，我试图使用画布，直接​​裁剪，因为结果，我转换了一个

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.

结果我使用 drawImage

但问题是：

我将图片设置为400x400，更大的那个，我认为画布是直接从原始图像，而不是我确定的那个尺寸，所以结果是没有什么像作物。

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

只要裁剪图片，然后点击CROP。

just crop the image and then click CROP.

我缺少了？

编辑：我改为320x320图片，看起来像裁剪工作很好，但与其他的图片不是正方形，没有

推荐答案

您可以通过将图片的原始尺寸除以当前尺寸， ，然后将裁剪矩形的坐标乘以该比率。

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/

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

这篇关于使用画布裁剪和显示结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！