将HTML5 Canvas的内容保存为图片

叁歲伎倆 2022-06-08 07:39 224阅读 0赞

我们可能注意到网页上有些图片的src或css背景图片的url后面跟了一大串字符，

比如:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg %3D%3D

那么这是什么呢？答案就是Data URI scheme。Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。

在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。  
　　目前，Data URI scheme支持的类型有：

data:,文本数据
    data:text/plain,文本数据
    data:text/html,HTML代码
    data:text/html;base64,base64编码的HTML代码
    data:text/css,CSS代码
    data:text/css;base64,base64编码的CSS代码
    data:text/javascript,Javascript代码
    data:text/javascript;base64,base64编码的Javascript代码
    data:image/gif;base64,base64编码的gif图片数据
    data:image/png;base64,base64编码的png图片数据
    data:image/jpeg;base64,base64编码的jpeg图片数据
    data:image/x-icon;base64,base64编码的icon图片数据

base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，在PHP中可以用函数base64\_encode() 进行编码，如echo base64\_encode(file\_get\_contents(‘wg.png’))。目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

举个图片的例子，网页中一张图片：

（1）可以这样显示：

<img src=“http://www.letuknowit.com/images/wg.png”/>  
       （2）也可以这样显示：  
<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>  
　　我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处呢，就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍。

借助Canvas自己的API：toDataURL()实现默认返回base64字节码。整个实现HTML + [JavaScript][]的代码很简单，代码如下：

**\[html\]** [view plain][] [copy][view plain]

1.  **<****html****>**  
2.  **<****meta** http-equiv="X-UA-Compatible" content="chrome=1"**>**  
3.  **<****head****>**  
4.  **<****script****>**  
5.          window.onload = function() \{  
6.              draw();  
7.              var saveButton = document.getElementById("saveImageBtn");  
8.              bindButtonEvent(saveButton, "click", saveImageInfo);  
9.              var dlButton = document.getElementById("downloadImageBtn");  
10.             bindButtonEvent(dlButton, "click", saveAsLocalImage);  
11.         \};  
12.             function draw()\{  
13.                 var canvas = document.getElementById("thecanvas");  
14.                 var ctx = canvas.getContext("2d");  
15.                 ctx.fillStyle = "rgba(125, 46, 138, 0.5)";  
16.                 ctx.fillRect(25,25,100,100);   
17.                 ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";  
18.                 ctx.fillRect(58, 74, 125, 100);  
19.                 ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color  
20.                 ctx.fillText("Gloomyfish - Demo", 50, 50);  
21.             \}  
22.               
23.             function bindButtonEvent(element, type, handler)  
24.             \{  
25.                    if(element.addEventListener) \{  
26.                       element.addEventListener(type, handler, false);  
27.                    \} else \{  
28.                       element.attachEvent('on'+type, handler);  
29.                    \}  
30.             \}  
31.               
32.             function saveImageInfo ()   
33.             \{  
34.                 var mycanvas = document.getElementById("thecanvas");  
35.                 var image    = mycanvas.toDataURL("image/png");  
36.                 var w=window.open('about:blank','image from canvas');  
37.                 w.document.write("**<****img** src='"+image+"' alt='from canvas'**/>**");  
38.             \}  
39.   
40.             function saveAsLocalImage () \{  
41.                 var myCanvas = document.getElementById("thecanvas");  
42.                 // here is the most important part because if you dont replace you will get a DOM 18 exception.  
43.                 // var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");  
44.                 var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");   
45.                 window.location.href=image; // it will save locally  
46.             \}  
47.         **</****script****>**  
48. **</****head****>**  
49. **<****body** bgcolor="\#E6E6FA"**>**  
50.     **<****div****>**  
51.         **<****canvas** width=200 height=200 id="thecanvas"**>****</****canvas****>**  
52.         **<****button** id="saveImageBtn"**>**Save Image**</****button****>**  
53.         **<****button** id="downloadImageBtn"**>**Download Image**</****button****>**  
54.     **</****div****>**  
55. **</****body****>**  
56. **</****html****>**

![save_snippets.png][]

**运行效果如下：**

![20130519214612817][]

[JavaScript]: http://lib.csdn.net/base/javascript
[view plain]: http://blog.csdn.net/jia20003/article/details/8948005#
[save_snippets.png]: /images/20220608/569fe53bba6448a9a33221e005e7532d.png
[20130519214612817]: /images/20220608/449eb5e1f4ec4fee9a3c3c8336f5561b.png