在 Javascript 中使用 X、Y 坐标裁剪图像

Question

我正在尝试用X and Y 坐标和width and height. 裁剪dataURL 图像
我不想调整图像大小。我只想获取区域 (x,y) 以及宽度和高度。
我已经在 PHP 中完成了此操作，但现在我正在尝试在 JS 中执行此操作。这是我的实际代码：

function resizeImage(url, width, height, x, y, callback) {
var canvas = document.createElement("canvas");
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        var sourceX = 0;
        var sourceY = 0;
        var sourceWidth = imageObj.width;
        var sourceHeight = imageObj.height;
        var destWidth = width;
        var destHeight = height;
        var destX = x;
        var destY = y;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
        callback(canvas.toDataURL())
      };
      imageObj.src = url;
}

这个函数只是改变宽度和高度，这不是它应该做的结果。

这是我的PHP 代码（如果有助于更好地了解我）

<?php
class Cropper {
    var $x;
    var $y;
    var $dataURL;
    var $width;
    var $height;
    var $filter;
    function __construct($x, $y, $dataURL, $width, $height, $filter) {
        $this->x = $x;
        $this->y = $y;
        $this->dataURL = $dataURL;
        $this->width = $width;
        $this->height = $height;
        $this->filter = $filter;
    }
    function setHeader() {
        header('Content-Type: image/png');
    }
    function Render() {
        $image = $this->dataURL;
        $image = substr($image, 22);
        $img = imagecreatetruecolor(340, 462);
        $org_img = imagecreatefromstring(base64_decode($image));
        imagecopy($img, $org_img, 0, 0, $this->x, $this->y, $this->width, $this->height);
        if($this->filter == 1) imagefilter($img, IMG_FILTER_GRAYSCALE);
        if($this->filter == 2) {
            imagefilter($img,IMG_FILTER_GRAYSCALE);
            imagefilter($img,IMG_FILTER_COLORIZE,100,50,0);
        }
        ob_start(); 
            imagepng($img);
            imagealphablending($img,true);
            $image_data = ob_get_contents(); 
        ob_end_clean(); 
        $image_data_base64 = base64_encode($image_data);
        imagedestroy($img);
        return 'data:image/png;base64,'.$image_data_base64;
    }
}
?>

为了更好地理解我，我还画了一张：

编辑：抱歉，在 X 和 Y 之间取反

所以函数需要返回黄色区域
我怎样才能做到这一点？我的代码有什么问题？谢谢

Answer 1

防止失真的关键似乎是设置画布元素的宽度和高度。然后，我对源和目标使用了所需的裁剪或 destination 宽度和高度，然后使用 0、0 作为子矩形的起始 x、y 坐标，或裁剪 destination 图片：

function resizeImage(url, width, height, x, y, callback) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');
    var imageObj = new Image();

    // set canvas dimensions

    canvas.width = width;
    canvas.height = height;

    imageObj.onload = function () {
        context.drawImage(imageObj, x, y, width, height, 0, 0, width, height);
        callback(canvas.toDataURL());
    };

    imageObj.src = url;
}

编辑

有趣的发现：除了裁剪之外，您还可以使用它为图像添加填充。

var padding = 10,
    sourceImgWidth = 150,
    sourceImgHeight = 100,
    paddedWidth = sourceImgWidth + padding * 2,
    paddedHeight = sourceImgHeight + padding * 2,
    x = -padding,
    y = -padding;

resizeImage('test.jpg', paddedWidth, paddedHeight, x, y, function (dataURL) {
    paddedImage.src = dataURL;
});

Answer 2

根据CanvasRenderingContext2D.drawImage() 函数的文档：

ctx.drawImage(图像, sx, sy, sWidth, sHeight, dx, dy, dWidth, d高度）；

sx, sy, sWidth, sHeight 是源图子矩形的参数
在您的情况下：参数 sx, sy, sWidth, sHeight 应与参数 dx, dy, dWidth, dHeight 一致（在最简单的情况下）
更改您的 imageObj.onload 处理程序，如下所示：

...
imageObj.onload = function() {
   context.drawImage(imageObj, x, y, width, height, x, y, width, height);
   callback(canvas.toDataURL())
};
...