将画布(canvas)图像保存成本地图片的方法

将画布(canvas)图像保存成本地图片的方法

2014年6月24日 歪脖骇客 发表回复
http://www.webhek.com/all-posts/

之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式，方法十分简单。但后来我发现只将canvas内容转变成图片输出还不够，如何能将转变后的图片保存到本地呢？

其实，这个方法也是非常简单的，几乎不用额外的编程知识。但我们可以更完美些，下面我将使用canvas2image.js,base64.js这两个脚本实现更强大的canvas->图片->本地的过程。

在下面的方框内你可以用鼠标绘制任意的图案，试一下吧，然后点击“保存…”按钮，浏览器将会提示你保存下载图片。或者点击”转换成…”，然后右键点击画布，可以看到浏览器右键菜单里有“保存图片..”一项。

    
 

使用HTML5画布技术，你可以在浏览器客户端用JavaScript绘制出各种美丽酷炫的图案，这些图案是不能直接保存的，本身也不是图片形式。
幸运的是，画布(canvas)对象有一个非常有用的方法:toDataURL()。这个方法能把画布里的图案转变成base64编码格式的png，然后返回 Data URL数据。

var strDataURI = oCanvas.toDataURL();
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

而且，如果你给toDataURL()传入mine类型的参数，你还可以将画布转变成其它格式的图片。

var strDataURI = oCanvas.toDataURL("image/jpeg");
// returns "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA..."

现在，有了 Data URL数据后，我们可将这些数据直接填充到元素里，或者我们可以直接从浏览器里下载它们。

上面我提到的两个js包也就是封装了一些方便的方法：

/*
 * Canvas2Image.saveAsXXXX = function(oCanvasElement, bReturnImgElement, iWidth, iHeight) { ... }
 */

var oCanvas = document.getElementById("thecanvas");

Canvas2Image.saveAsPNG(oCanvas);  // 这将会提示用户保存PNG图片

Canvas2Image.saveAsJPEG(oCanvas); // 这将会提示用户保存JPG图片

Canvas2Image.saveAsBMP(oCanvas);  // 这将会提示用户保存BMP图片


// 返回一个包含PNG图片的元素
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);   

// 返回一个包含JPG图片的元素
var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true); 
                                                       
// 返回一个包含BMP图片的元素
var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true); 


// 这些函数都可以接受高度和宽度的参数
// 可以用来调整图片大小

// 把画布保存成100x100的png格式
Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);

你也许注意到了saveAsBMP这个函数，实际上没有浏览器直接支持转化成BMP格式，但我们可以借用getImageData()方法实现对它的支持，这个方法提供给我们从画布里直接读取原始像素的功能。

有了这些数据，我们可以构造出BMP格式图片(这种格式非常的简单)。

对于大个的图片，转化成BMP格式会需要几秒钟的时间，但小图片就非常的快了，不会有延迟的感觉。