canvas畫布導出圖片並下載

近期在學習關於畫布知識，關於 畫布導出圖片，

在導出jpeg格式的圖片時，會發現圖片背景色變成了黑色，原因是畫布透明的地方 默認轉成了黑色，可以在繪制畫布前設置透明處背景色為白色。

// 背景色轉換成白色
 ctx.fillStyle = "#fff";
 ctx.fillRect(0, 0, c.width, c.height);

 

 <!-- 一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪制. -->
    <!-- HTML5 <canvas> 元素用於圖形的繪制，通過腳本 (通常是JavaScript)來完成. -->
    <!-- <canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。 -->
    <canvas id="canvas"></canvas>
    <button class="button-balanced" id="save">轉換</button>
    <a href="" download="canvas_love.jpeg" id="save_herf">
        <img src="" id="save_img" alt=""> </a>

        var c = document.getElementById("canvas");
        function drawLove(canvas) {
            let ctx = canvas.getContext("2d");
            ctx.beginPath();
            // 背景色轉換成白色
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, c.width, c.height);

            // ctx.drawImage(img, 0, 0);



            ctx.fillStyle = "#E992B9";

            ctx.moveTo(75, 40);

            ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);

            ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);

            ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);

            ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);

            ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);

            ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);

            ctx.fill();
       }

        drawLove(c);

        var butSave = document.getElementById("save");
        console.log(butSave)
         butSave.onclick = function () {
            // alert('123')

            var svaeHref = document.getElementById("save_herf");

            /*
        
             * 傳入對應想要保存的圖片格式的mime類型
        
             * 常見：image/png，image/gif,image/jpg,image/jpeg
        
             */

            var img = document.getElementById("save_img");

            var tempSrc = canvas.toDataURL("image/jpeg");
            // console.log(tempSrc)

            svaeHref.href = tempSrc; // a 標簽的 href 地址

            img.src = tempSrc;

        };

 

CanvasRenderingContext2D 接口提供的 2D 渲染背景用來繪制<canvas>元素，為了這個接口的對象，需要在 <canvas> 上調用 getContext() ，並提供一個 "2d" 的參數：

toDataURL()這個方法能把畫布里的圖案轉變成base64編碼格式的png，然后返回 Data URL數據