将画布(canvas)图像保存成本地图片的方法
来源:互联网 发布:洗衣店软件破解版 编辑:程序博客网 时间:2024/06/03 01:35
之前我曾介绍过如何将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数据后,我们可将这些数据直接填充到<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格式会需要几秒钟的时间,但小图片就非常的快了,不会有延迟的感觉。
长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”,带你了解最新的前端技术。
- 将画布(canvas)图像保存成本地图片的方法
- 将画布(canvas)图像保存成本地图片的方法
- 将画布(canvas)图像保存成本地图片的方法
- Android 如何将Canvas上绘制的内容保存成本地图片
- Android将Bitmap保存成本地图片
- Activity保存成图片,如何将界面Activity保存成本地图片
- 用PHP将网页上的Canvas图像保存到服务器上的方法
- canvas新建画布,并将绘画结果保存到本地。
- canvas的方法--画布的基本方法
- h5的canvas画布常用方法
- canvas.toDataUrl 画布导出功能(将canvas画板保存为图片格式)!
- HTML5 Canvas(画布)图像处理
- Canvas(画布)的使用
- Canvas 画布的属性
- canvas画布的用法
- h5的画布Canvas
- canvas画布的使用
- 怎样将html5中利用canvas绘制的图像在服务端保存为图片?
- 每日一得--Classloader机制解析
- 深入理解Java类加载原理
- leetcode题解||Median of Two Sorted Arrays问题
- git 初次使用
- 119Pascal's Triangle II
- 将画布(canvas)图像保存成本地图片的方法
- AndroidEventBus ( 事件总线 ) 的设计与实现
- C#中调用cmd,传值路径中有空格报错的处理方法
- 成为IT精英,我奋斗7年(转)
- 【JAVA】【NIO】4、Java NIO Buffer
- k-d树(hdu2966)
- Java核心技术复读笔记
- 黑马程序员——Java之二分查找算法
- Xcode上创建openGL项目