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数据

转载于:https://www.cnblogs.com/lpp-11-15/p/11316727.html