星空网 > 软件开发 > 网页设计

canvas图像保存

很多时候绘制完成的图片需要保存,那么我们就可以使用到Canvas API来完成这最后一步!

Canvas API使用toDataURL方法把绘画的状态输出到一个data URL中然后重新装载,然后我们就可以把重新装载后的文件直接保存。


Canvas API保存文件的原理实际上就是把我们绘画的状态动态输出到一个data URL地址所指向的数据中的过程。

什么是data URL?
data URL实际上就是base64位编码的URL,主要用于小型的,可以在网页中直接嵌入,而不需要从外部嵌入数据,比如img元素里面的图像。

data URL的格式“data:image/jpeg;base64,/9j/....”

toDataURL的使用方法
canvas。toDataURL(type);
这个方法使用一个参数type,表示输出数据的MIME类型。
什么是MIME类型:
jpg image/jpeg

 

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>canvas图像保存</title>    <script src='/images/loading.gif' data-original="js/canvas.js" type="text/javascript" charset="utf-8"></script>      </head>  <body onload="draw('canvas')">  <canvas id="canvas" width="400" height="300"></canvas>    </body></html>

 

function draw(id){  var canvas = document.getElementById(id);  var context = canvas.getContext('2d');  context.fillStyle = "green";  context.fillRect(0,0,400,300);  window.location = canvas.toDataURL('images/jpeg');}

 




原标题:canvas图像保存

关键词:图像

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

德国VAT税务筹划一年的费用介绍:https://www.kjdsnews.com/a/1387970.html
德国VAT税务申报流程及注意事项:https://www.kjdsnews.com/a/1387971.html
德国VAT税务申报指南:https://www.kjdsnews.com/a/1387972.html
德国VAT税务申报及年度费用详解:https://www.kjdsnews.com/a/1387973.html
德国VAT税号查询推荐最佳网站:https://www.kjdsnews.com/a/1387974.html
德国VAT税号查询指南:https://www.kjdsnews.com/a/1387975.html
皇家游轮航线 皇家邮轮旅游攻略:https://www.vstour.cn/a/408245.html
2017春节旅游攻略有吗:https://www.vstour.cn/a/408246.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流