dongtiao2976
2016-03-17 20:58
浏览 640
已采纳

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

I'm triying to crop an dataURL image with X and Y coordinates and width and height.
I don't want to resize the image. I just want to get the zone (x,y) and the width and height.
I've alerdy done this in PHP, but now I'm triying to do it in JS. Here's my actual code:

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

This function just changes the width & height, and that's not the result that it's supposes to do.

Here's my PHP code (if it can be helpful to better understand me)

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

I've also made a draw to better understand me:

Picture

EDIT: sorry, inversed between X and Y

So the function needs to return the yellow area
How can I do this? What's wrong in my code? Thanks

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • duanmen1887 2016-03-17 22:21
    已采纳

    The key to preventing distortion seems to be setting the width and height of the canvas element. I then used the desired cropped or destination width and height for both source and destination, and then used 0, 0 as the starting x, y coordinates for the sub-rectangle, or cropped destination image:

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

    Edit

    Interesting discovery: In addition to cropping, you can use this to add padding to an image.

    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;
    });
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • dongyi6668 2016-03-17 21:34

    According to documentation for CanvasRenderingContext2D.drawImage() function:

    ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

    sx, sy, sWidth, sHeight are parameters of the sub-rectangle of the source image
    In your case: parameters sx, sy, sWidth, sHeight should coincide with parameters dx, dy, dWidth, dHeight (in most simple case)
    Change your imageObj.onload handler as shown below:

    ...
    imageObj.onload = function() {
       context.drawImage(imageObj, x, y, width, height, x, y, width, height);
       callback(canvas.toDataURL())
    };
    ...
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题