博客

canvas导出为图片并用JS下载

  • Post author:
  • Post category:其他



canvas导出为图片并用JS下载


进入全屏

line

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);

例子参见：

http://www.baidufe.com/demo/html2canvas.html