将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学习之2D转换功能详解
Dec 23 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 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
第三节 定义一个类 [3]
2006/10/09 PHP
php中看实例学正则表达式
2006/12/25 PHP
php下实现农历日历的代码
2007/03/07 PHP
php函数与传递参数实例分析
2014/11/15 PHP
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
Python正规则表达式学习指南
2016/08/02 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
python函数超时自动退出的实操方法
2020/12/28 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
《蜗牛》教学反思
2014/02/18 职场文书
英文推荐信格式范文
2014/05/09 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
阿凡达观后感
2015/06/10 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang