js把html页面打印成png图片（实测，可用）

最新推荐文章于 2024-08-02 18:17:51 发布

安康全是山

最新推荐文章于 2024-08-02 18:17:51 发布

阅读量4.2k

点赞数

分类专栏： js案例

js案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ceshi</title>
	<style>
	.test h3{
		width: 100px;
	    height: 100px;
	    text-align: center;
	    background: green;
	    line-height: 100px;
	}
	</style>
</head>
<body>
    <div class="test">
       <h3>1233</h3>
    </div>    
   

    <div class="copy">
    <button onclick="copy()">截图</button>
    <a class="down" href="" download="downImg">下载</a>

    </div>
	<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
	<script>
	    var pic;
	    var canvas2 = document.createElement("canvas");
	    let 
	    _canvas = document.querySelector('.test');
	    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 = canvas2.getContext("2d");
	    context.scale(2,2);
	     html2canvas(document.querySelector('.test'),{canvas:canvas2}).then(function(canvas) {            
	            pic=canvas;
	            //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
	            document.querySelector(".down").setAttribute('href',canvas.toDataURL());
	     });
	     //点击的时候把图片复制到下面那个div下
	      function copy(){
	                 document.querySelector(".copy").appendChild(pic);            
	            }
    </script>
</html>