该文章引用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'truefalse, window, 0, 0, 0, 0, 0, falsefalsefalsefalse, 0, null);
    save_link.dispatchEvent(event);
};
   
// 下载后的问题名
var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
// download
saveFile(imgData,filename);

毕业论文—使用js将canvas保存为图片文件,并且自定义文件名的更多相关文章

  1. js将canvas保存成图片并下载

    <canvas id="canvas" width="400" height="400"></canvas> < ...

  2. js 将页面保存为图片

    <!DOCTYPE html><html><head><title>保存为images</title><meta charset=&q ...

  3. Unity3D中调用外接摄像头,并保存为图片文件

    http://bbs.9ria.com/thread-170539-1-1.html 项目要求调用摄像头,并且把图像保存下来,上传到服务器. 这里有几个难点,调用摄像头是很简单的,unity已经提供好 ...

  4. Canvas保存为图片

    public static void GenerateCanvas(string imgSaveName, int canvasWidth, int canvasHeight, string imgD ...

  5. InputStream流保存成图片文件

    public void saveBit(InputStream inStream) throws IOException{ ByteArrayOutputStream outStream = new ...

  6. ASP保存远程图片文件到本地代码

    <% Function SaveRemoteFile(LocalFileName,RemoteFileUrl) SaveRemoteFile=True dim Ads,Retrieval,Get ...

  7. js 把字符串保存为txt文件,并下载到本地

    代码如下 exportRaw('text.txt','123123123') function fakeClick(obj) { var ev = document.createEvent(" ...

  8. 基于html2canvas实现网页保存为图片及图片清晰度优化

    一.实现HTML页面保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: 方案1:将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含 ...

  9. 将HTML页面自动保存为PDF文件并上传的两种方式(一)-前端(react)方式

    一.业务场景 公司的样本检测报告以React页面的形式生成,已调整为A4大小的样式并已实现分页,业务上需要将这个网页生成PDF文件,并上传到服务器,后续会将这个文件发送给客户(这里不考虑). 二.原来 ...

随机推荐

  1. 第一章 Part 2/2 Git 一览

    被跟踪文件(Tracked files) 被跟踪文件是 Git 管理的工作目录 (存储库) 中的文件.当你添加新文件或使更新现有文件时,Git都会跟踪这些文件变化.在某个时间点,你将通过命令将这些文件 ...

  2. php、前端开发(网站建设)环境搭建

    php集成开发环境wampserver,是一款免费开源的软件,下载地址http://www.wampserver.com,由于是国外的网站,打开速度慢,根据自己的电脑选择32位/64位的系统下载.

  3. js删除数组指定元素

    删除js数组中制定的元素,这里用到了jquery. var a = new Array("a","b","cc","d3" ...

  4. Libero 使用拾忆

    使用Libero软件进行管脚分配的时候可以使用脚本语言,详细的使用说明见des_constraints_ug.pdf(在Libero安装目录下寻找) 如: set_io srame_oe -REGIS ...

  5. html5 Websockets development guidance

    1. WebSockets -- full-duplex communication The main HTML5 pillars include Markup, CSS3, and JavaScri ...

  6. Toad各版本所包含的组件

    Toad for Oracle Base Edition Toad for Oracle Knowledge Xpert for PL/SQL Knowledge Xpert for Oracle A ...

  7. ObjC运行时部分概念解析(一)

    转型iOS已经许久了,Runtime(运行时)还没有好好了解过.之前没有阅读过源码,紧紧凭借自己的臆测.现在阅读下源码,做一些笔记.方便再次翻阅 SEL SEL是一个关键字,如果没有涉及runtime ...

  8. my97中文乱码问题

    在使用my97日期插件后页面显示中文乱码问题: 解决方法: 把下面这段代码复盖到你的ZH-CN.js就解决了 var $lang={ errAlertMsg: "\u4E0D\u5408\u ...

  9. linux 下安装mongodb

    1.初始化docker:    -v 设置docker和host共享目录,格式hostPath:dockerContainerPath    -p 端口映射    --name,容器名称    cen ...

  10. ListView加载性能优化---ViewHolder---分页

    ListView是Android中一个重要的组件,可以使用它加列表数据,用户可以自己定义列表数据,同时ListView的数据加载要借助Adapter,一般情况下要在Adapter类中重写getCoun ...