該文章引用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);
|