示例

本示例顯示了一個簡單的圖像裁剪功能，該功能獲取圖像和裁剪坐標并返回裁剪后的圖像。

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

};

總結

以上是生活随笔為你收集整理的html5 canvas裁剪图片,html5-canvas 使用画布裁剪图像的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。