使用html2canvas js 截取网页图片下载
Posted jeff151013
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用html2canvas js 截取网页图片下载相关的知识，希望对你有一定的参考价值。
1.前台使用html2canvas js 截取Div元素转存为图片，下载。效果：
2.前台代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Html2canvas_JS/html2canvas.min.js"></script>
<script src="Html2canvas_JS/canvas2image.js"></script>
</head>
<body>
<div id="div1" style="width: 200px; height: 450px; border: silver 1px solid; ">
<img src="Images/imgDemo.jpg" style="width: 160px; height: 160px; margin-left: 20px; margin-right: 20px; margin-top: 40px;"/>
<label style="text-align: center;display:block"><b>王二小</b><br/></label>
<label style="text-align: center;display:block">王二小喜欢放牛<br/></label>
<div align="center">
王二小喜欢放牛,<br />
王二小喜欢放牛,<br />
王二小喜欢放牛,<br />
王二小喜欢放牛 <br />
</div>
</div>
<div id="img" style="display: none; width: 200px; height: 450px; position: absolute; top: 8px; left: 216px;"></div>
<button id="btnCreateImg">生成图片</button>
<button id="btnSaveImg">下载图片</button>
</body>
<script type="text/javascript">
var content = document.getElementById("div1");
var btn = document.getElementById("btnCreateImg");
btn.onclick = function()
html2canvas(content,
useCORS: true, //允许跨域
onrendered:function(canvas)
canvas.setAttribute("id", "thecanvas");
document.getElementById("img").innerHTML = "";
document.getElementById("img").appendChild(canvas);
);
window.alert(‘生成图片成功‘);
;
var btnDownload = document.getElementById("btnSaveImg");
btnDownload.onclick = function ()
var timestamp = Date.parse(new Date());
var fileName = timestamp + ".PNG";
var oCanvas = document.getElementById("thecanvas");
var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute("src");
//下载保存
saveFile(img_data1, fileName);
//此种方法将直接下载文件，但是不带有图片后缀名
//Canvas2Image.saveAsPNG(oCanvas);
window.alert(‘下载完成‘);
;
var saveFile = function (data, fileName)
var link = document.createElement(‘a‘);
link.href = data;
link.download = fileName;
link.title = "";
var event = document.createEvent("MouseEvents");
event.initEvent("click", true, true);
link.dispatchEvent(event);
;
</script>
</html>
3.需要的js文件：
canvas2image.js
html2canvas.min.js
图片：
以上是关于使用html2canvas js 截取网页图片下载的主要内容，如果未能解决你的问题，请参考以下文章