Question

我正在尝试使用dataURL坐标和X and Y裁剪width and height.图片我不想调整图像大小。我只想得到区域（x，y）以及宽度和高度我在alerdy用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

根据CanvasRenderingContext2D.drawImage()功能的文档：

ctx.drawImage（image，sx，sy，sWidth，sHeight，dx，dy，dWidth，做切片）;

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()) }; ...

Answer 2

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

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; });

使用Javascript中的X，Y坐标裁剪图像

2 个答案: