将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 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 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
php获取从html表单传递数组的方法
2015/03/20 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
php接口隔离原则实例分析
2019/11/11 PHP
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
python中map的基本用法示例
2018/09/10 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Python编写单元测试代码实例
2020/09/10 Python
成人教育自我鉴定
2013/11/01 职场文书
生日邀请函范文
2014/01/13 职场文书
致全体运动员广播稿
2014/02/01 职场文书
文艺晚会主持词
2014/03/24 职场文书
法院信息化建设方案
2014/05/21 职场文书
销售员岗位职责
2014/06/09 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
Python实现列表拼接和去重的三种方式
2021/07/02 Python