毕业论文—使用js将canvas保存为图片文件,并且自定义文件名
该文章引用http://blog.csdn.net/qq547276542/article/details/51906741
1、从canvas中直接提取图片元数据
// 图片导出为 png 格式 var type = 'png' ; var imgData = canvas.toDataURL(type); |
上面的代码得到的数据格式为:data:image/png;base64,.....
2、将mime-type改为image/octet-stream,强制让浏览器直接download
/** * 获取mimeType * @param {String} type the old mime-type * @return the new mime-type */ var _fixType = function (type) { type = type.toLowerCase().replace(/jpg/i, 'jpeg' ); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r; }; // 加工image data,替换mime type imgData = imgData.replace(_fixType(type), 'image/octet-stream' ); |
上面这个代码得到的数据格式为:data:image/octet-stream;base64,.....
3、图片download到本地
/** * 在本地进行文件保存 * @param {String} data 要保存到本地的图片数据 * @param {String} filename 文件名 */ var saveFile = function (data, filename){ var save_link = document.createElementNS( 'http://www.w3.org/1999/xhtml' , 'a' ); save_link.href = data; save_link.download = filename; var event = document.createEvent( 'MouseEvents' ); event.initMouseEvent( 'click' , true , false , window, 0, 0, 0, 0, 0, false , false , false , false , 0, null ); save_link.dispatchEvent(event); }; // 下载后的问题名 var filename = 'baidufe_' + ( new Date()).getTime() + '.' + type; // download saveFile(imgData,filename); |
毕业论文—使用js将canvas保存为图片文件,并且自定义文件名的更多相关文章
- js将canvas保存成图片并下载
<canvas id="canvas" width="400" height="400"></canvas> < ...
- js 将页面保存为图片
<!DOCTYPE html><html><head><title>保存为images</title><meta charset=&q ...
- Unity3D中调用外接摄像头,并保存为图片文件
http://bbs.9ria.com/thread-170539-1-1.html 项目要求调用摄像头,并且把图像保存下来,上传到服务器. 这里有几个难点,调用摄像头是很简单的,unity已经提供好 ...
- Canvas保存为图片
public static void GenerateCanvas(string imgSaveName, int canvasWidth, int canvasHeight, string imgD ...
- InputStream流保存成图片文件
public void saveBit(InputStream inStream) throws IOException{ ByteArrayOutputStream outStream = new ...
- ASP保存远程图片文件到本地代码
<% Function SaveRemoteFile(LocalFileName,RemoteFileUrl) SaveRemoteFile=True dim Ads,Retrieval,Get ...
- js 把字符串保存为txt文件,并下载到本地
代码如下 exportRaw('text.txt','123123123') function fakeClick(obj) { var ev = document.createEvent(" ...
- 基于html2canvas实现网页保存为图片及图片清晰度优化
一.实现HTML页面保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: 方案1:将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含 ...
- 将HTML页面自动保存为PDF文件并上传的两种方式(一)-前端(react)方式
一.业务场景 公司的样本检测报告以React页面的形式生成,已调整为A4大小的样式并已实现分页,业务上需要将这个网页生成PDF文件,并上传到服务器,后续会将这个文件发送给客户(这里不考虑). 二.原来 ...
随机推荐
- 有哪些经常被误用的 HTML、JavaScript、CSS 的元素、方法和属性?
一,以前想要把一个元素(input 之类的)设成只读的时候都是用 disabled,后来发现这是不对的. 因为在 HTML 里面,如果一个元素被设置成 disabled, 那么它的值就不会被发送到 s ...
- STM32f10xxx 之 GPIO口配置
背景 配置stm32f103使其完成PWM输出的过程中,在配置GPIO口的时候,按照习惯配置GPIO口的speed为50MHZ,突然就意识到,为什么大部分例程习惯配置为50MHZ,而不是其它值,即有了 ...
- Linux学习之四--Nginx
关于Nginx的 nginx的是一个高性能的Web服务器的软件.它比Apache HTTP服务器更加灵活,重量轻的程序. 本教程将教你如何安装和你的CentOS 7服务器上启动Nginx的. 先决 ...
- bootstarp
我最近在学一个前端框架叫bootstarp.我的老大给了一个bootstarp的模板给我,我看了看感觉没意思.因为那里面的样式,我也会写,所以我就没心思去看,每次只要面板上有的我就搬下来就完了,只要面 ...
- 从sum()求和引发的思考
sum()求和是一个非常简单的函数,以前我的写法是这样,我想大部分和我一样刚开始学习JS的同学写出来的也会是这样. function sum() { var total=null; for(var i ...
- liniux mint android-ndk风波
我的安装过程sudo chmod a+x android-ndk-r10d-linux-x86_64.bin/dowonload $ ./android-ndk-r10d-linux-x86_64.b ...
- SQL SERVER 2008 获取表字段的类型
SELECT * FROM ( select a.name TABLENAME,b.name FIELDNAME,c.name FIELDTYPE,c.length FIELDLENGTH from ...
- Java对象的深拷贝和浅拷贝、集合的交集并集
http://blog.csdn.net/lian_1988/article/details/45970927 http://www.cnblogs.com/yxnchinahlj/archive/2 ...
- MySQL 排名统计
select actor_id,@curr_cnt:=cnt as cnt , ,@rank) as rank, @prev_cnt:=@curr_cnt as dummy from( select ...
- Count the number of possible triangles
From: http://www.geeksforgeeks.org/find-number-of-triangles-possible/ Given an unsorted array of pos ...