在过去的几个月里,我们已经关于HTML5画布谈了很多。HTML5画布提供有许多其他有趣的接口,这使得它迄今为止为最迷人的和灵活的对象。今天我们要学习如何把你的画布保存为一个图像。

       从一个画布获取像素数据是相当简单的。在我们开始写一些代码之前,应该指出的是,你只能得到本地图像数据,无论如何，你可以在画布上描绘跨域图片，但你却不能获取跨域图片的像素数据信息。这也是为了安全考虑。

       canvas提供了toDataURL的接口，可以方便的将canvas画布转化成base64编码的image。目前支持的最好的是png格式，jpeg格式的现代浏览器基本也支持，但是支持的不是很好。

       我们创建一个画布，在上面做一些绘图，然后试着把它保存为本地图片。

       HTML代码：

<div>     <img src="http://www.html5party.com/wp-content /uploads/2013/09/css_yangshijiance.png" />     <img src="http://www.html5party.com/wp-content /uploads/2013/09/canvas_chroma.png" /> </div> <div>     <a href="javascript:void(0);">Image Tag</a> |     <a href="javascript:void(0);">New Window</a> |     <a href="javascript:void(0);">Download</a> </div> <div>     <canvas /> </div>

       好的，一口气把js脚本添加在后面：

var can = document.getElementById('canvas'); var ctx = can.getContext('2d'); var imgA = new Image(); imgA.src ='http://www.html5party.com/wp-content /uploads/2013/09/css_yangshijiance.png'; imgA.onload = function() {   ctx.drawImage(imgA, -25, 0, imgA.width, imgA.height);   ctx.restore(); }; var imgB = new Image(); imgB.src = 'http://www.html5party.com/wp-content /uploads/2013/09/canvas_chroma.png'; imgB.onload = function() {   ctx.globalAlpha = 0.1   ctx.drawImage(imgB, -100, -75, imgB.width, imgB.height);   ctx.restore(); }; function toImage(returnType) {   var dataURL = document.getElementById('canvas').toDataURL("image/png");   // The returnType argument specifies how to get the   // the image.  'obj' will set the source to an image element.   // 'window' will open a new window and display the image.   // 'download' will prompt the user to save the image.   switch(returnType) {     case 'obj':       var imgObj = new Image();       imgObj.src = dataURL;       document.getElementById('graphics').appendChild(imgObj);       break;     case 'window':       window.open(dataURL, "Canvas Image");       break;     case 'download':       dataURL = dataURL.replace("image/png", "image/octet-stream");       document.location.href = dataURL;       break;   } }

       理想的状态是页面上有三个点击链接：

        1、Image Tag

           点击会有一张图片插入在网页中。

        2、New Window

          打开一个新的窗口，并显示一个PNG格式的图片

        3、Download

          下载保存一张PNG个格式的图片

       很不幸，点击并没有反映，为什么呢？笔者做了许多试验，原因出在图片渲染上，canvas上如果添加图片，toDataURL（）将失效，获取不到canvas信息。通过简单几步来验证这个问题。

       把js脚本中图片渲染的部分去除，A和B图。为了便于观察，在画布上画一个简单的矩形，填充颜色：

            ctx.fillStyle = 'Red';             ctx.strokeStyle = 'Green';             ctx.beginPath();             ctx.rect(20, 20, 100, 100);             ctx.stroke();             ctx.fill();

       这样画布上便显示为一个红色矩形，格式为PNG：

       上述的三个点击链接生效了。没有找到更深层次的原因，也许是canvas还在不断完善中，暂时无法转换渲染图片编码。不过不影响作图，如果有读者有更好的理解，还望不吝赐教！

       HTML5Party编辑整理。