将网页保存为图片(canvas生成的图片)

最近发现项目中需要点击按钮保存页面为图片，就是网页截屏，通过用户自主填写或是答案生成图片然后发朋友圈或是其他的圈。

而html2canvas 能帮助前端实现这一功能：

<script src="../../js/jquery-3.4.1.min.js"></script>

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

<p>我的邀请码</p>

<p>我的邀请码</p>

<p>我的邀请码</p>

<p class="erweima"><a class="down" href="" download="downImg">保存二维码</a></p>

<script>

  //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊

  //html2canvas(document.querySelector('div')).then(function(canvas) {

  // document.body.appendChild(canvas);

  //});

  //创建一个新的canvas

  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;

  canvas2.height = h;

  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('body'), {

  canvas: canvas2,

      taintTest:true,

      useCORS:true,

      allowTaint:true

  }).then(function(canvas) {

  //此处html可换body，或div等

  //document.body.appendChild(canvas);

  //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载

  document.querySelector(".down").setAttribute('href', canvas.toDataURL());

  });

  </script>