该文章引用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. 有哪些经常被误用的 HTML、JavaScript、CSS 的元素、方法和属性?

    一,以前想要把一个元素(input 之类的)设成只读的时候都是用 disabled,后来发现这是不对的. 因为在 HTML 里面,如果一个元素被设置成 disabled, 那么它的值就不会被发送到 s ...

  2. STM32f10xxx 之 GPIO口配置

    背景 配置stm32f103使其完成PWM输出的过程中,在配置GPIO口的时候,按照习惯配置GPIO口的speed为50MHZ,突然就意识到,为什么大部分例程习惯配置为50MHZ,而不是其它值,即有了 ...

  3. Linux学习之四--Nginx

    关于Nginx的 nginx的是一个高性能的Web服务器的软件.它比Apache HTTP服务器更加灵活,重量轻的程序. 本教程将教你如何安装和你的CentOS 7服务器上启动Nginx的.   先决 ...

  4. bootstarp

    我最近在学一个前端框架叫bootstarp.我的老大给了一个bootstarp的模板给我,我看了看感觉没意思.因为那里面的样式,我也会写,所以我就没心思去看,每次只要面板上有的我就搬下来就完了,只要面 ...

  5. 从sum()求和引发的思考

    sum()求和是一个非常简单的函数,以前我的写法是这样,我想大部分和我一样刚开始学习JS的同学写出来的也会是这样. function sum() { var total=null; for(var i ...

  6. liniux mint android-ndk风波

    我的安装过程sudo chmod a+x android-ndk-r10d-linux-x86_64.bin/dowonload $ ./android-ndk-r10d-linux-x86_64.b ...

  7. SQL SERVER 2008 获取表字段的类型

    SELECT * FROM ( select a.name TABLENAME,b.name FIELDNAME,c.name FIELDTYPE,c.length FIELDLENGTH from ...

  8. Java对象的深拷贝和浅拷贝、集合的交集并集

    http://blog.csdn.net/lian_1988/article/details/45970927 http://www.cnblogs.com/yxnchinahlj/archive/2 ...

  9. MySQL 排名统计

    select actor_id,@curr_cnt:=cnt as cnt , ,@rank) as rank, @prev_cnt:=@curr_cnt as dummy from( select ...

  10. Count the number of possible triangles

    From: http://www.geeksforgeeks.org/find-number-of-triangles-possible/ Given an unsorted array of pos ...