如何使用js將canvas儲存為圖片檔案，並且可以自定義檔名
阿新 • • 發佈：2019-02-01
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;
varevent
= 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);
|