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

其实,这个方法也是非常简单的,几乎不用额外的编程知识。但我们可以更完美些,下面我将使用canvas2image.jsbase64.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数据后,我们可将这些数据直接填充到<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, , );

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

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

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

转载地址:http://www.webhek.com/save-canvas-to-image/

最新文章

  1. object.bind()方法的低版本兼容
  2. iOS 深浅拷贝
  3. 注意页面上的时间戳可能会成为bd快照的时间_快照不更新的原因
  4. web开发中,前端javascript代码的组织结构
  5. 【BOZJ 1901】Zju2112 Dynamic Rankings
  6. 《OD大数据实战》Hue环境搭建
  7. SQL Server 行列转换
  8. 读取Webpage表中的内容
  9. IOS开发之程序执行状态更改
  10. 全站 HTTPS
  11. sun.proxy.$Proxy0 cannot be cast to dao.impl.MyAdviceImpl
  12. Bootstrap -- 按钮样式与使用
  13. Docker入门与实践
  14. Linux里文件和文件夹权限的含义
  15. Elasticsearch入门之从零开始安装ik分词器
  16. Atiit 常见功能 常用功能与模块的最快速解决方案
  17. oracle中的to_number在mysql中的转换
  18. AJPFX:外汇的杠杆保证金是什么
  19. jdk8 lambda表达式总结
  20. Java泛型之类型擦除

热门文章

  1. 在jquery中使用AJAX
  2. [LOJ 2190] 「SHOI2014」信号增幅仪
  3. hdu4403- A very hard Aoshu problem(搜索)
  4. selenum autoit上传图片
  5. 1121 - Reverse the lights 思维题
  6. (转)Nginx/Apache服务连接数梳理
  7. 在东京生活的中国IT程序员
  8. oracle备份imp命令大全
  9. td 内容自动换行 table表格td设置宽度后文字太多自动换行
  10. Android自定义可拖动的悬浮按钮