使用html2canvas使html代码转为图片

1.引入js

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

2.html代码中，

标签如果需要边框需要设置：border-top: thick solid #000;重点是thick

如果有img图片，最好用同源路径

var canvas2 = document.createElement("canvas");
//img55是要被转换的标签
let _canvas = document.querySelector('.img55');
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(1.96,1.96);
html2canvas(document.querySelector('.img55'),{canvas:canvas2}).then(function(canvas)
{
	pic=canvas;
    //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
	if(pic){
		$('#img55').css({'display':'none'});
		$('#img66').css({'display':'block'});
        //img66为base64图片的存储标签<img/>
		$('#img66').attr('src',pic.toDataURL());
	}
});

3.

 

4.