<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>html2canvas生成海报</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="html2canvas.min.js"></script>
</head>
<body>
<div>
<input type="button" value="截图" onclick="takeScreenshot()">
<input type="button" value="保存图片" onclick="save()">
</div>
<div id="view" style="width: 100%; background:#eee;padding: 20px;margin: 10px 0">
<p>图片不见了</p>
<img class="bg"style="height: 300px;width: 100%" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="图片不见了">
<h4 style="color: #000; ">Hello world!</h4>
</div>
<script type="text/javascript">
function takeScreenshot() {
//两个参数：所需要截图的元素id，截图后要执行的函数， canvas为截图后返回的最后一个canvas
html2canvas(document.getElementById('view'), {
useCORS: true
}).then(function(canvas) {
document.body.appendChild(canvas);
$(document).find('canvas').attr('id', 'mycanvas');
});
}
function save() {
var canvas = document.getElementById("mycanvas"); //获取canvas
var data = canvas.toDataURL('image/png');
data= data.replace(/data\:image\/png\;base64\,/,"");//注意获取是image/png 还是其他的
var raw = window.atob(data);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for(var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
var blob = new Blob([uInt8Array], {type:'image/png'});//注意获取图片类型
var aLink = document.createElement('a');
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);
aLink.download = "下载吧.jpg";
aLink.href = URL.createObjectURL(blob);
aLink.click();
}
</script>
</body>
</html>
html2canvas.js截图-生成海报
需积分: 0 123 浏览量
2023-03-07
17:40:15
上传
评论
收藏 43KB RAR 举报
html2canvas截图_生成海报.rar （2个子文件） 
html2canvas截图_生成海报 
index.html 2KB
html2canvas.min.js 194KB资源评论
PPPHP
- 粉丝: 14
- 资源: 16
