html5-canvas Images Image cropping using canvas
Example
This example shows a simple image cropping function that takes an image and cropping coordinates and returns the cropped image.
function cropImage(image, croppingCoords) {
var cc = croppingCoords;
var workCan = document.createElement("canvas"); // create a canvas
workCan.width = Math.floor(cc.width); // set the canvas resolution to the cropped image size
workCan.height = Math.floor(cc.height);
var ctx = workCan.getContext("2d"); // get a 2D rendering interface
ctx.drawImage(image, -Math.floor(cc.x), -Math.floor(cc.y)); // draw the image offset to place it correctly on the cropped region
image.src = workCan.toDataURL(); // set the image source to the canvas as a data URL
return image;
}
To use
var image = new Image();
image.src = "image URL"; // load the image
image.onload = function () { // when loaded
cropImage(
this, {
x : this.width / 4, // crop keeping the center
y : this.height / 4,
width : this.width / 2,
height : this.height / 2,
});
document.body.appendChild(this); // Add the image to the DOM
};
