canvas生成圖片時背景透明變為白色背景


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)
  }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM