問題

先前在項目中用d3畫了樹圖等svg圖形，然后需求是需要以png格式上傳這個圖片到服務器保存以供其他地方調用，可以先生成svg碼流，然后在canvas上繪圖，最后在利用canvas.toDataUrl()生成png碼流，然后上傳到服務器，但是上傳后發現一個問題就是png碼流生成的圖片丟失了canvas的背景色，背景色變為了透明的。

問題原因

查詢問題后在canvas草案中發現原因是：

For image types that do not support an alpha channel, the image must be composited onto a solid black background using the source-over operator, and the resulting image must be the one used to create the data: URL.

當你利用toDataUrl輸出的碼流生成圖片時候，根據圖片格式不同會是透明或者黑色。

解決方案

直接上代碼：

//Returns contents of a canvas as a png based data url, with the specified
//background color
function canvasToImage(backgroundColor)
{
    //cache height and width        
    var w = canvas.width;
    var h = canvas.height;

    var data;       

    if(backgroundColor)
    {
        //get the current ImageData for the canvas.
        data = context.getImageData(0, 0, w, h);

        //store the current globalCompositeOperation
        var compositeOperation = context.globalCompositeOperation;

        //set to draw behind current content
        context.globalCompositeOperation = "destination-over";

        //set background color
        context.fillStyle = backgroundColor;

        //draw background / rect on entire canvas
        context.fillRect(0,0,w,h);
    }

    //get the image data from the canvas
    var imageData = this.canvas.toDataURL("image/png");

    if(backgroundColor)
    {
        //clear the canvas
        context.clearRect (0,0,w,h);

        //restore it with original / cached ImageData
        context.putImageData(data, 0,0);        

        //reset the globalCompositeOperation to what it was
        context.globalCompositeOperation = compositeOperation;
    }

    //return the Base64 encoded data url string
    return imageData;
}

主要幾個步驟

1. 從canvas中得到ImageData
2. 將globalCompositeOperation屬性設置為destination-over. 然后將會在當前圖形之下繪制新的圖形
3. 畫一個rectangle填充你想要的背景色
4. 此時再生成碼流
5. 后面就是清除canvas恢復到最初狀態即可

參考資料

1. 解決方案
2. MDN