html2canvas.js的初级使用Demo
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html2canvas example</title>
<script type="text/javascript" src="html2canvas.js"></script>
</head>
<script type="text/javascript">
function html2Image() {
console.log('test');
html2canvas(document.getElementById("view")).then(function (canvas) {
console.log(canvas);
var dataUrl = canvas.toDataURL();
document.getElementById("html2Image").src = dataUrl;
});
}
</script>
<body>
<div id="view" style="background:url(test.jpg) 50%; width: 600px; height: 400px;">
</div>
<input type="button" value="截图" onclick="html2Image()"
style="margin: 20px 0 0 20px;height: 50px;width: 100px;font-size: 2rem">
<div>
<img id="html2Image" src="" alt="">
</div>
</body>
</html>
注意：#view的宽度不要设太大，不然会超出窗口报错；
代码效果：
该Demo只是简单的操作，一些优化或者特殊场景操作有空会持续学习；
是用到的js下载地址：html2canvas.js 1.0.0版本
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
