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

标签: 技术技巧 canvas html5 画布 画布图片转化 | 发表时间:2014-06-24 03:30 | 作者:歪脖骇客
出处:http://www.webhek.com

之前我曾介绍过如何将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格式会需要几秒钟的时间,但小图片就非常的快了,不会有延迟的感觉。

相关 [canvas 图像 成本] 推荐:

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

- - WebHek
之前我曾介绍过如何将HTML5 画布(canvas)内容转变成图片形式,方法十分简单. 但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢. 其实,这个方法也是非常简单的,几乎不用额外的编程知识. 但我们可以更完美些,下面我将使用 canvas2image.js, base64.js这两个脚本实现更强大的canvas->图片->本地的过程.

html5 canvas 图像处理

- - HTML5研究小组
前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理,在此稍稍交代一下. 与matlab处理图像类似的是,这里也是采用图像矩阵的形式. 下面就介绍一个简单的例子:. context1.drawImage(image,0,0);//绘制原始图像,(0,0)表示图像的左上角位与canvas画布的位置.

HTML5 Canvas(画布)教程 – 图像处理

- - Web前端 - ITeye博客
Canvas标记很多年前就被当作一个新的HTML标记成员加入到了HTML5标准中. 在此之前,人们要想实现动态的网页应用,只能借助于第三方的 插件,比如Flash或Java,而引入了Canvas标记后,人们直接打通了通往神奇的动态应用网页的大门. 本教程内容只覆盖了一小部分、但却是非常重 要的canvas标记的应用功能——图像显示和处理.

在HTML 5 的 Canvas 中应用卷积矩阵对图像处理

- BeerBubble - 走走停停看看
HTML 5中的 canvas 元素是相当强大的,利用他的 getImageData 方法可以对载入的图像直接进行位图操作. 但是直接对位图进行操作比较麻烦,如果利用卷积矩阵这个工具的话,可以通过几个简单的参数实现复杂的效果. 所谓的矩阵的卷积,就是如下图显示的那样,当计算红色框中的数值的时候,分别先提取周围绿框中8个数字,然后与施加的那个矩阵中对应位置相乘,然后把各个乘积加在一起,就得到了最终的值了.

html5 canvas入门

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

备份:html5 canvas cheat sheet

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

HTML5 Canvas双缓存实例

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

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

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

使用JavaScript和Canvas开发游戏(一)

- iVane - 为之漫笔
原文作者:Matthew Casperson • 编辑:Michele McDonough. 原文链接: Game Development with JavaScript and the Canvas element. 3、通过Canvas元素实现高级图像操作. 4、通过Canvas实现视差滚动. 8、JavaScript键盘输入.

HTML5 Canvas开发框架:CasualJS Framework

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