png圖片透明區(qū)域被填充成黑色

關(guān)于更多日常使用的公共類(lèi)的操作方法，可以關(guān)注下小滑輪網(wǎng)站

問(wèn)題：

在用canvas的toDataURL處理png時(shí)，發(fā)現(xiàn)透明區(qū)域被填充成黑色。
為什么canvas會(huì)png的透明區(qū)域轉(zhuǎn)成黑色呢？
canvas轉(zhuǎn)換之前移除alpha通道，所以透明區(qū)域被填充成了黑色。
但是，我們希望的是，canvas可以將png的透明區(qū)域填充成白色。
那么怎么將canvas中的透明區(qū)域填充成白色呢？
我們有兩個(gè)方案：

解決方案一：將透明的pixel設(shè)成白色

因?yàn)閜ng圖片的背景都是透明的，所以我們可以尋找透明的pixel，然后將其全部設(shè)置成白色，核心代碼如下：

// 將canvas的透明背景設(shè)置成白色
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
for(var i = 0; i < imageData.data.length; i += 4) {
    // 當(dāng)該像素是透明的，則設(shè)置成白色
    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; 
    }
}
context.putImageData(imageData, 0, 0);

缺點(diǎn)顯而易見(jiàn)。當(dāng)png圖片上存在半透明區(qū)域時(shí)，會(huì)將其填充為黑色。這是我們不希望的

解決方案二：在canvas繪制前填充白色背景

// 在canvas繪制前填充白色背景
context.fillStyle = "#fff";
context.fillRect(0, 0, canvas.width, canvas.height);

顯然，在canvas繪制前填充白色背景這種方法，不僅簡(jiǎn)單，而且對(duì)png圖片的半透明區(qū)域填充難看的黑色塊。推薦這種解決方案。
小滑輪網(wǎng)站上還有其他圖片處理函數(shù)。

1. 圖片下載
2. 圖片轉(zhuǎn)成base64
3. canvas標(biāo)簽轉(zhuǎn)換成img標(biāo)簽
4. Base64轉(zhuǎn)Blob對(duì)象
5. 創(chuàng)建一個(gè)canvas，并獲取 CanvasRenderingContext2D
6. 內(nèi)容以文件形式下載下來(lái)
7. 瀏覽器是否支持webP格式圖片