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

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

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

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

你的浏览器不支持画布技术,请使用谷歌浏览器/火狐浏览器或最新的IE9/10/11。

    
 

使用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数据后,我们可将这些数据直接填充到<img> 元素里,或者我们可以直接从浏览器里下载它们。

上面我提到的两个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图片的<img>元素
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);   

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


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

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

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

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

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

阅读余下内容
 

20条回应:“将画布(canvas)图像保存成本地图片的方法”

  1. 你好,为什么我下载jpeg的图片,但是下载下来的文件没有后缀名的?而且文件名字就是“下载” 文件名可以重命名么?

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号