Saving cropped image

[hyperking]

Docs are missing directions for saving the cropped region. I would assume doing the following during the callback for any event listener but I'm not sure.

crop.on('end', function (region) { 
var canvas = document.getElementById('canvas');
var ctx = canvass.getContext('2d');
var image = document.querySelector('#edit-image img');

ctxs.drawImage(images, region.x, region.y, region.width, region.height);
});

[mhsteppan]

The same problem over here... wondering how to display only the cropped region to another .

[ronytesler]

How do I save the cropped image? any suggestions for a different and simple library?

[a0m0rajab]

idk all if you have solved your problem but I could reach to the solution with this code:

I have a canvas element with canvas id in the HTML file.

crop.on('end', function (region) { 
                canvas = document.getElementById('canvas');
                ctx = canvas.getContext('2d');
                image = new Image(); // Using optional size for image
                image.onload = drawImageActualSize; // Draw when image has loaded
                // Load an image of intrinsic size 300x227 in CSS pixels
                image.src = 'images/test.JPG';
                function drawImageActualSize() {
                    // Use the intrinsic size of image in CSS pixels for the canvas element
    canvas.width = region.width;
                    canvas.height = region.height;
                    // To use the custom size we'll have to specify the scale parameters
                    // using the element's width and height properties - lets draw one
                    // on top in the corner:
                    ctx.drawImage(this, region.x, region.y, region.width, region.height, 0, 0, region.width, region.height);
   
                }
}

For more information: MDN rendering image