转载:将画布(canvas)图像保存成本地图片的方法
之前我曾介绍过如何将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, , );
你也许注意到了saveAsBMP这个函数,实际上没有浏览器直接支持转化成BMP格式,但我们可以借用getImageData()方法实现对它的支持,这个方法提供给我们从画布里直接读取原始像素的功能。
有了这些数据,我们可以构造出BMP格式图片(这种格式非常的简单)。
对于大个的图片,转化成BMP格式会需要几秒钟的时间,但小图片就非常的快了,不会有延迟的感觉。
转载地址:http://www.webhek.com/save-canvas-to-image/
转载:将画布(canvas)图像保存成本地图片的方法的更多相关文章
- PHP《将画布(canvas)图像保存成本地图片的方法》
用PHP将网页上的Canvas图像保存到服务器上的方法 2014年6月27日 歪脖骇客 发表回复 8 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审 ...
- canvas图像保存
很多时候绘制完成的图片需要保存,那么我们就可以使用到Canvas API来完成这最后一步! Canvas API使用toDataURL方法把绘画的状态输出到一个data URL中然后重新装载,然后我们 ...
- uniapp微信小程序保存base64格式图片的方法
uniapp保存base64格式图片的方法首先第一要先获取用户的权限 saveAlbum(){//获取权限保存相册 uni.getSetting({//获取用户的当前设置 success:(res)= ...
- Android 如何将Canvas上绘制的内容保存成本地图片(转)
效果如下图所示 保存在sd卡上的文件为 手机上显示效果为: 1>>在Manifest文件中增加相应权限 <!-- 在SDCard中创建与删除文件权限 --> <uses- ...
- Word中截取部分内容并保存为jpg图片的方法
private void button1_Click(object sender, EventArgs e) { var appWord = new Microsoft.Office.Interop. ...
- [转]RGB数据保存为BMP图片
转自:http://blog.csdn.net/yixianfeng41/article/details/52591585 一.BMP文件由文件头.位图信息头.颜色信息和图形数据四部分组成. 1.BM ...
- canvas 图片拖拽旋转之二——canvas状态保存(save和restore)
引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...
- HTML 5 画布(canvas)
canvas 元素使用 JavaScript 在网页上绘制图像,本身是没有绘图能力. canvas 是一个矩形区域,可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的 ...
- 【HTML5】Canvas图像
把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y); 注:这里的Img必须是一个图像对象. 显示一个canvas图像: <!DOCTYPE html> &l ...
随机推荐
- vue教程3-webpack搭建项目
vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...
- Codeforces 1159E(拓扑序、思路)
要点 序列上各位置之间的关系常用连边的手段转化为图的问题. 经过一番举例探索不难发现当存在两条有向边交叉时是非法的. -1是模糊的,也就是填多少都可以,那为了尽量避免交叉我们贪心地让它后面那个连它就行 ...
- NOI2015软件包管理器 树剖线段树
题目: 一棵树,兹磁 1.查询根到一个点的染色点数并全染好 2.查询子树内染色点数并把颜色洗掉 树剖裸题,丝毫不虚(为什么我考试的时候碰不到这种好题呢)好像20min写完搞定 #include < ...
- centos下svnadmin的部署过程
1. 安装SVN #yum –y install subversion 2. 安装openjdk #yum –y list java* #yum –y install java-1.8.0 ...
- SpringBoot---核心---日志配置
- jQuery.data() 与 jQuery(elem).data()源码解读
之前一直以为 jQuery(elem).data()是在内部调用了 jQuery.data(),看了代码后发现不是.但是这两个还是需要放在一起看,因为它们内部都使用了jQuery的数据缓存机制.好吧, ...
- Fedora桌面系统Idea中的部分中文无法显示解决
在Linux 桌面开发已经有一段时间了,个人用的是最新的Fedora ,装上idea后,写代码再加中文注释的时候发现部分汉字打不出来,删除的时候发现汉字占着位,只是显示不出来,最初以为是注释问题,调整 ...
- java初探之初始化
首先明确,变量初始化是在任何方法(包括构造器)被调用之前进行的. 1.实例变量的初始化 实例变量只有当它所属的类实例化后才会存在,构造器被执行就意味着对象就被创建. 1.1.指定初始化. class ...
- Kendo 单页面应用(一)概述
Kendo 单页面应用(一)概述 Kendo 单页面应用(Single-Page Application,缩写为 SPA)定义了一组类用于简化 Web 应用(Rich Client)开发,最常见的单页 ...
- Linux系统日志分析
Linux系统拥有非常灵活和强大的日志功能,可以保存几乎所有的操作记录,并可以从中检索出我们需要的信息. 大部分Linux发行版默认的日志守护进程为 syslog,位于 /etc/syslog 或 / ...