保存页面为图片

PC可行：

<div class="save-btn" @click="saveImg()">
    <a class="down" href="" :download="图片文件名">保存图片</a>
</div>

saveImg() {
      //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
      //html2canvas(document.querySelector('div')).then(function(canvas) {
      //    document.body.appendChild(canvas);
      //});
      //创建一个新的canvas
      let self = this
      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);
      self.showImgDialog = true
      html2canvas(document.querySelector('div'), {
          canvas: canvas2
      }).then(function(canvas) {
          //document.body.appendChild(canvas);
          //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
          document.querySelector(".down").setAttribute('href', canvas.toDataURL());
      });
    }

移动端改为弹窗展示图片，长按保存：

<van-dialog
      className="img-dialog"
      v-model="showImgDialog"
      cancelButtonText="关闭"
      title="长按保存图片"
      show-cancel-button
      :show-confirm-button="false">
      <img class="canvasImg" style="margin-left: 20%;" width="60%" src="" />
    </van-dialog>

document.querySelector(".canvasImg").setAttribute('src', canvas.toDataURL());

 

补充链接：https://juejin.cn/post/6844903513848283143