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

Posted 2023-02-25

【中文标题】在 Javascript 中使用 X、Y 坐标裁剪图像

【英文标题】：Crop image with X, Y coordinates in Javascript

【发布时间】：2016-03-17 20:58:22

【问题描述】：

我正在尝试用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 之间取反

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

【问题讨论】：

您是否尝试过类似：github.com/fengyuanchen/cropper 或者您是否尝试自己编写？

我正在尝试自己编写。不想为此使用 lib

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

【参考方案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())
;
...

【讨论】：

这不会裁剪图像。

@toomanyredirects，你能证明这一点吗？ （你看到 developer.mozilla.org/ru/docs/Web/API/CanvasRenderingContext2D/… 的 jsfiddle 例子了吗？