html代码里存图片,html生成图片并保存到本地方法（Windows）(示例代码)

// 最近用到一个保存html为图片到本地的功能(保存到下载目录)，记之，该功能IE使用Blob 存储数据，关于兼容性问题参见如下表格，其他浏览器使用a标签download属性新功能下载

BrowserConstructs asFilenamesMax Blob SizeDependencies

Firefox 20+

Blob

Yes

800 MiB

None

Firefox < 20

data: URI

No

n/a

Chrome

Blob

Yes

None

Chrome for Android

Blob

Yes

None

Edge

Blob

Yes

?

None

IE 10+

Blob

Yes

600 MiB

None

Opera 15+

Blob

Yes

500 MiB

None

Opera < 15

data: URI

No

n/a

Safari 6.1+*

Blob

No

?

None

Safari < 6

data: URI

No

n/a

// 步骤一：引入html2canvas.js

//步骤二：完成以下方法即可

function downloadForJS(){

//使用html2canvas 转换html为canvas

html2canvas($("#ID")).then(function(canvas) {

if(IE){ //判断IE下保存方法

var blob = canvas.msToBlob();

window.navigator.msSaveBlob(blob, fileName);

}else{//其他浏览器保存方法

var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url

var saveLink = document.createElement( ‘a‘);

saveLink.href =imgUri;

saveLink.download = fileName; saveLink.click();

}

});

}

更多兼容性问题参考：https://github.com/eligrey/FileSaver.js