<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
</head>
<body class="bodyewm">
<div class="test erweima">
<div class="ewmbg">
<div class="erweima-empty"></div>
<div class="ewm-message">
<div class="ewm-img"></div>
<h1 class="ewm-name">xxx</h1>
<div class="ewm">
<img src="./images/ewm.jpg">
</div>
<div class="erweima-empty2"></div>
</div>
</div>
</div>
<div class="share"><a class="down" href="" download="downImg"></a></div>
</body>
<script>
var canvas2 = document.createElement("canvas");
let _canvas = document.querySelector('html');
//此处可换body，或div等
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
canvas2.width = w * 2;
canvas2.height = h * 2;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
//可以按照自己的需求，对context的参数修改,translate指的是偏移量
// var context = canvas.getContext("2d");
// context.translate(0,0);
var context = canvas2.getContext("2d");
context.scale(2, 2);
html2canvas(document.querySelector('html'), { canvas: canvas2 }).then(function(canvas) {
//此处html可换body，或div等
//document.body.appendChild(canvas);
//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
$(".down").attr('href', canvas.toDataURL());
});
</script>
</html>
会报以下的错误
微信截图_20190929173707.png
解决办法是html文件放在服务器环境下 例如查看地址http://192.168.1.111/mobile/erweima.html
网友评论