将HTML5 Canvas的内容保存为图片借助toDataURL实现


Posted in HTML / CSS onMay 20, 2013

主要思想是借助Canvas自己的API - toDataURL()来实现,整个实现
HTML + JavaScript的代码很简单。

复制代码
代码如下:

<html>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<head>
<script>
window.onload = function() {
draw();
var saveButton = document.getElementById("saveImageBtn");
bindButtonEvent(saveButton, "click", saveImageInfo);
var dlButton = document.getElementById("downloadImageBtn");
bindButtonEvent(dlButton, "click", saveAsLocalImage);
};
function draw(){
var canvas = document.getElementById("thecanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
ctx.fillRect(25,25,100,100);
ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
ctx.fillRect(58, 74, 125, 100);
ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color
ctx.fillText("Gloomyfish - Demo", 50, 50);
}
function bindButtonEvent(element, type, handler)
{
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
element.attachEvent('on'+type, handler);
}
}
function saveImageInfo ()
{
var mycanvas = document.getElementById("thecanvas");
var image = mycanvas.toDataURL("image/png");
var w=window.open('about:blank','image from canvas');
w.document.write("<img src='"+image+"' alt='from canvas'/>");
}
function saveAsLocalImage () {
var myCanvas = document.getElementById("thecanvas");
// here is the most important part because if you dont replace you will get a DOM 18 exception.
// var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image; // it will save locally
}
</script>
</head>
<body bgcolor="#E6E6FA">
<div>
<canvas width=200 height=200 id="thecanvas"></canvas>
<button id="saveImageBtn">Save Image</button>
<button id="downloadImageBtn">Download Image</button>
</div>
</body>
</html>

运行效果如下
将HTML5 Canvas的内容保存为图片借助toDataURL实现
HTML / CSS 相关文章推荐
CSS3 圆角效果
Jul 15 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 #HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 #HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 #HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 #HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 #HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 #HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 #HTML / CSS
You might like
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
浅谈Vue.js组件(二)
2019/04/09 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
python字符串替换示例
2014/04/24 Python
python实现的简单文本类游戏实例
2015/04/28 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python