将HTML5 Canvas的内容保存为图片

标签: html5 canvas 图片 | 发表时间:2013-05-19 13:44 | 作者:jia20003
分享到:
出处:http://blog.csdn.net

主要思想是借助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>

运行效果如下:



作者:jia20003 发表于2013-5-19 21:44:01 原文链接
阅读:166 评论:0 查看评论

相关 [html5 canvas 图片] 推荐:

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

Wadda:基于 HTML5 Canvas 的图片放大镜

- - 博客园_首页
Wadda 是下一代图片放大技术,使用HTML5 Canvas实现图片放大镜功能. 借助 HTML5 Canvas 标签,能够自定义放大级别而不需要为每个级别定义图片,还能够设置羽化(Fading)效果. 使用非常简单,只需在img标签的title属性中设置放大图片的路径,例如:. 引入Wadda.js文件,并添加如下代码:.

将HTML5 Canvas的内容保存为图片

- - CSDN博客Web前端推荐文章
主要思想是借助Canvas自己的API - toDataURL()来实现,整个实现. HTML + JavaScript的代码很简单. 作者:jia20003 发表于2013-5-19 21:44:01 原文链接. 阅读:166 评论:0 查看评论.

备份:html5 canvas cheat sheet

- - 膘叔
纯备份资料,HTML5的canvas资料.

html5 canvas 图像处理

- - HTML5研究小组
前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理,在此稍稍交代一下. 与matlab处理图像类似的是,这里也是采用图像矩阵的形式. 下面就介绍一个简单的例子:. >canvas图像处理</. >是时候更换浏览器了<. >点击下载firefox</.

HTML5 Canvas双缓存实例

- - Web前端 - ITeye博客
转自:http://www.108js.com/article/article3/30046.html?id=255. 下面是用HTML5的<canvas>标签写的一个视差滚动动画的示例. 采用了制作动画或者游戏编程中常用的双缓冲技术:获取到页面中的Canvas对象之后,创建了一个与页面Canvas同样大小的Canvas对象.

HTML5 Canvas: 测试浏览器是否支持Canvas

- - CSDN博客Web前端推荐文章
本文翻译自Steve Fulton & Jeff Fulton. 在获取HTML页面上Canvas元素的引用后,我们需要测试一下该元素是否包含“上下文”(context). Canvas的上下文指的是由浏览器定义的用于绘画的平面. 简单地说,如果上下文不存在的话,Canvas也就名存实亡了.

HTML5 Canvas开发框架:CasualJS Framework

- Jimmy - ITeye论坛最新讨论
CasualJS Framework是根据ActionScript3?.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架. 虽然Canvas提供了强大的绘图功能,但满足不了高级开发的需要. 利用CasualJS的显示对象架构及渲染机制,你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象.

25 超棒的 HTML5 Canvas 游戏

- 迎客松 - LinuxEden开源社区-Linux伊甸园
Canvas 元素作为HTML5标准的一部分,允许你通过脚本动态渲染点阵图像. 这是为了基于浏览器的矢量图形而设计. HTML Canvas 把一个绘图 API 展现给 JS 客户端,使得脚本能够把想绘制的东西都绘制到一块画布上. 阅读全文 | 邮件推荐 | 评论回复.

html5 canvas 详细使用教程

- - CSDN博客Web前端推荐文章
图形变形(平移、旋转、缩放). 矩阵变换(图形变形的机制). 绘制图像(图片平铺、裁剪、像素处理[不只图像、包括其他绘制图形]). 保存和恢复状态(context). 结合setInterval制作动画.      <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验.