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
};
热门推荐
10 周岁生日祝福语简短男孩
11 毕业离别祝福语简短老师
12 新娘妈妈祝福语简短的
13 同事出院鲜花祝福语简短
14 小朋友祝福语简短的话
15 宝宝简短的生日祝福语
16 伤者出院祝福语简短大全
17 朋友弟弟生日祝福语简短
18 送红包祝福语简短朋友