HTML5 Canvas 开发 绘图方法整理 【十四、将 Canvas画布 作为图片保存并下载】

将Canvas 绘制出来的东西作为图片保存起来，主要使用的是 toDataURL(type) ;
type 是可选参数，如果省略 将使用png格式 来保存图片 MIME类型主要是设定图片被保存的类型，
当该扩展名被访问时，浏览器会自动使用指定应用程序打开。

<script>

    let cans=document.getElementById("myCanvas");
    let ctx=cans.getContext("2d");

    ctx.strokeStyle = "#0695FF";        //定义矩形的颜色
    ctx.strokeRect(50,50,100,100);

    ctx.strokeRect(50,170,100,100);


    function imgType(ty) {
        let type = ty.toLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    }

    function download() {

        let type = 'png';   //设置下载图片的格式

        let img_png_src = cans.toDataURL("image/png");  //将canvas保存为图片

        let imgData = img_png_src.replace(imgType(type),'image/octet-stream');

        let filename = '图片' + '.' + type; //下载图片的文件名

        saveFile(imgData,filename);
    }

    let saveFile = function(data, fileName){
        let save_link = document.createElement('a');
        save_link.href = data;
        save_link.download = fileName;

        let event = document.createEvent('MouseEvents');
        event.initEvent("click", true, false);
        save_link.dispatchEvent(event);
    };

</script>

效果图：

HTML部分：

<div style="text-align: center;">

    <canvas id="myCanvas" width="500" height="300" style="border: 1px solid #fff123"></canvas>

    <div>
        <button id="btn" onclick="download()">点我下载</button>
    </div>


</div>