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

缺乏、安全感 2022-05-31 10:06 526阅读 0赞

将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>

效果图：

![这里写图片描述][70]

![这里写图片描述][70 1]

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>

[70]: /images/20220531/a742cc69b40a4f9885752b298f883776.png
[70 1]: /images/20220531/d5a7e012cb1e4de9aa045e2eb098d854.png

发表评论取消回复

表情：

评论列表（有 0 条评论，526人围观）

还没有评论，来说两句吧...

相关阅读

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

将Canvas 绘制出来的东西作为图片保存起来，主要使用的是 toDataURL(type) ; type 是可选参数，如果省略将使用png格式来保存图片 MIME类型

缺乏、安全感/ 2022年05月31日 10:06/ 0 赞/ 527 阅读

相关 HTML5 Canvas 开发绘图方法整理【十三、Canvas重点之：状态】

Canvas最重要的两个概念，一个是路径，另一个就是状态了。要知道，Canvas 是基于“状态”来绘制的，每次绘制（fill() 或 stroke() ）的时候都会检查

快来打我*/ 2022年05月31日 10:05/ 0 赞/ 229 阅读

相关 HTML5 Canvas 开发绘图方法整理【十二、Canvas重点之：路径】

Canvas 路径可以说是一个非常的！相当的！重要的东西，除了矩形，其他基本所有图形都是以路径为基础的。路径操作有三种方法： beginPath() 起始一条

川长思鸟来/ 2022年05月31日 09:49/ 0 赞/ 301 阅读

相关 HTML5 Canvas 开发绘图方法整理【十、Canvas渐变、图形渐变&&文字渐变】

基础渐变三部曲：语法： 1、创建渐变对象 ctx.createLinearGradient(x0,y0,x1,y1); x0,y0 渐变开始点坐标 x1,y

╰+哭是因爲堅強的太久メ/ 2022年05月31日 09:49/ 0 赞/ 295 阅读

相关 HTML5 Canvas 开发绘图方法整理【八、Canvas 转换】

Canvas 转换方法：所有单位默认为 “px ” ; 转换： Canvas 转换方法：所有单位默认为 “px ” ; translate() 重新映射画布上的

我不是女神ヾ/ 2022年05月31日 09:17/ 0 赞/ 257 阅读

相关 HTML5 Canvas 开发绘图方法整理【九、Canvas旋转、缩放】

rotate() 旋转当前绘图　　（旋转）语法： ctx.rotate 需要注意的是它默认旋转的原点并不是以之前绘制的图形某一点为原点而是以Canvas 画布 x

电玩女神/ 2022年05月31日 09:17/ 0 赞/ 373 阅读

相关 HTML5 Canvas 开发绘图方法整理【六、canvas image /canvas绘制图片、平铺图片】

绘制图片目前有三种调用的方式： 1、ctx.drawImage(image,dx,dy); //image 是要显示的图片 dx与 dy 是图片左上角的横坐标与纵坐标

喜欢ヅ旅行/ 2022年05月31日 09:05/ 0 赞/ 595 阅读

相关 HTML5 Canvas 开发绘图方法整理【四、canvas曲线图形 / 圆形】

其实在Canvas 中的基本图形就只有两个：直线图形和曲线图形。圆形也算是在曲线图形中，一般画圆的时候必须配套使用 beginPath() 和 closePath

绝地灬酷狼/ 2022年05月31日 08:45/ 0 赞/ 264 阅读

相关 HTML5 Canvas 开发绘图方法整理【二、canvas直线 & canvas矩形】

开始绘制图形之前有一点需要说一下，Canvas 采用的坐标系是W3C的坐标系： X轴正方向向右; Y轴正方向向下; 所有的绘制方向都以这个为准。

红太狼/ 2022年05月31日 07:50/ 0 赞/ 519 阅读

相关 HTML5 Canvas 绘图方法整理【十八、Canvas动画/ requestAnimationFrame() 兼容】

Canvas动画与一般的JS动画不太一样，因为它并不是用定时器 setInterval() 实现的，事实上，setInterval() 稍微存在一些性能问题，对于Ca

柔情只为你懂/ 2022年05月29日 01:15/ 0 赞/ 316 阅读