htmlw2canvas 实现截图

1：引入资源：

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

2：调用方法

 //默认下载(不能修改文件名)
   html2canvas(document.querySelector(".container")).then(canvas => {
   let imgUrl =  canvas.toDataURL('image/png',1).replace("image/png", "image/octet-stream");
   window.location.href=imgUrl;})

  //高清下载
  var canvas2 = document.createElement("canvas");
  let _canvas = document.querySelector('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(".container"),{ canvas: canvas2 }).then(canvas => {
    let imgUrl = canvas.toDataURL('image/png');
    let a = document.createElement("a");
    a.href = imgUrl;
    a.download ="aa.png";
    a.click(); })

官网文档链接