html图片保存本地相册,使用HTML截图并保存为本地图片的实现代码

html2canvas_download

a {

cursor: pointer;

color: rgb(85, 26, 139);

text-decoration: underline;

}

hello world!

var oDiv = document.getElementById('oDiv');

// body截图

// html2canvas(document.body).then(function(canvas) {

// document.body.appendChild(canvas);

// });

html2canvas(oDiv).then(function(canvas) {

document.body.appendChild(canvas);

var oCavans = document.getElementsByTagName('canvas')[0];

var strDataURI = oCavans.toDataURL();

downLoadFn(strDataURI);

});

//判断浏览器类型

function myBrowser() {

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

var isOpera = userAgent.indexOf("Opera") > -1;

if(isOpera) {

return "Opera"

}; //判断是否Opera浏览器

if(userAgent.indexOf("Firefox") > -1) {

return "FF";

} //判断是否Firefox浏览器

if(userAgent.indexOf("Chrome") > -1) {

return "Chrome";

}

if(userAgent.indexOf("Safari") > -1) {

return "Safari";

} //判断是否Safari浏览器

if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {

return "IE";

}; //判断是否IE浏览器

if(userAgent.indexOf("Trident") > -1) {

return "Edge";

} //判断是否Edge浏览器

}

//IE浏览器图片保存本地

function SaveAs5(imgURL) {

var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000");

for(; oPop.document.readyState != "complete";) {

if(oPop.document.readyState == "complete") break;

}

oPop.document.execCommand("SaveAs");

oPop.close();

}

// chrome14+,firefox20+,pera15+,Edge 13+,Safari未实现

function download(strDataURI) {

var link = document.createElement('a');

link.innerHTML = 'download_canvas_image';

link.download = 'mypainting.png';

link.addEventListener('click', function(ev) {

link.href = strDataURI;

}, false);

document.body.appendChild(link);

};

function downLoadFn(url) {

if(myBrowser() === "IE" || myBrowser() === "Edge") {

SaveAs5(url);

} else {

download(url);

}

}

总结

以上所述是小编给大家介绍的使用HTML截图并保存为本地图片的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网