canvas中插入透明圖片,getImageData()生成img時,透明如何轉換為白色背景的方式。
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("tulip"); ctx.drawImage(img,0,0,w,h); this.cvsContext=cxt; toWhite(w,h)
通過 getImageData() 復制畫布上指定矩形的像素數據,然后通過 putImageData() 將圖像數據放回畫布:
_toWhite (w,h) { var imageData = this.cvsContext.getImageData(0, 0, w, h) for (var i = 0; i < imageData.data.length; i += 4) { // 當該像素是透明的,則設置成白色 if (imageData.data[i + 3] === 0) { imageData.data[i] = 255 imageData.data[i + 1] = 255 imageData.data[i + 2] = 255 imageData.data[i + 3] = 255 } } this.cvsContext.putImageData(imageData, 0, 0) }
