<script src="js/html2canvas.js"></script>
<script src="js/canvas2image.js"></script>
<script>
var timer = setInterval(function () {
//判断图片加载完没
if (document.getElementById('img1').complete) {
clearInterval(timer);
$(function () { var canvas2 = document.createElement("canvas");
var _canvas = document.querySelector('.Share'); //需要替换成图片的html区域
//获取宽高
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
canvas2.width = w * window.devicePixelRatio;
canvas2.height = h * window.devicePixelRatio;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
//
window.devicePixelRatio 根据浏览器在手机屏幕放大倍数
//可以按照自己的需求,对context的参数修改,translate指的是偏移量
// var context = canvas.getContext("2d");
// context.translate(0,0);
var context = canvas2.getContext("2d");
// context.translate(1,1);
context.scale(window.devicePixelRatio, window.devicePixelRatio);
context.translate(-window.screen.width * 0.1, -window.screen.height * 0.02);
//用于需要截图的不是全屏的情况
html2canvas(_canvas, { canvas: canvas2 }).then(function (canvas) {
var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
$(".Share").html('<img class="down" src="' + imgUri + '" style="width:' + w + 'px;">');
})
});
console.log(window.devicePixelRatio)
console.log(document.getElementById('img1').complete)//js输出
}
}, 10);
</script>