html5 canvas裁剪图片,html5-canvas 使用画布裁剪图像

示例

本示例显示了一个简单的图像裁剪功能，该功能获取图像和裁剪坐标并返回裁剪后的图像。

function cropImage(image, croppingCoords) {

var cc = croppingCoords;

var workCan = document.createElement("canvas"); // 创建一个画布

workCan.width= Math.floor(cc.width);  // 将画布分辨率设置为裁剪的图像尺寸

workCan.height= Math.floor(cc.height);

var ctx = workCan.getContext("2d");    // 获取2D渲染界面

ctx.drawImage(image, -Math.floor(cc.x), -Math.floor(cc.y)); // 绘制图像偏移以将其正确放置在裁剪区域上

image.src= workCan.toDataURL();       // 将图像源设置为画布作为数据URL

return image;

}

使用

var image = new Image();

image.src = "image URL"; // 加载图像

image.onload = function () {  // 加载时

cropImage(

this, {

x :this.width/ 4,     // 作物保持中心

y :this.height/ 4,

width :this.width/ 2,

height :this.height/ 2,

});

document.body.appendChild(this);  // 将图像添加到DOM

};