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:

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

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:

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

• javascript
• php
• jquery
• html

• Have you tried something like: github./fengyuanchen/cropper OR are you trying to write your own? – danielrsmith Commented Mar 17, 2016 at 21:04
• I'm triying to write my own. Don't want to use lib for this – user5672329 Commented Mar 17, 2016 at 21:05

2 Answers 2

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

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