Vue中如何将Dom元素转换为图片并保存

项目中经常碰到如何将一个页面以图片的形式保存下来或者几个图片合为一个图片，用作存档

在原生JavaScript中利用html2canvas.js将dom转为图片并保存，在Vue中也是类似的，不过都有依赖包使用

这里我们利用 html2canvas依赖

第一步：安装 npm install html2canvas --save

第二步：在需要使用的页面引入

import html2canvas from "html2canvas"

第三步：构建

<div class="canvas_box" id="mycanvas" ref="mycanvas"></div>

标签里面放置图片等元素(需要合成到图片里的元素)。如果需要合成按钮操作的话，如果是vue中想要页面出现就获取就要在create中调用

<button @click="toImage('mycanvas')">合 成</button>

实现：写法---注意这是没有合成按钮操作的，如果需要，可以通过传值这是直接将某页面的缩略图显示在某一个页面的角落

toImage() {
      // console.log("确认下载预编码接口");
        // ---------------------------------------------------------------------------
        window.pageYoffset = 0;
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
        // 先获取你要转换为img的dom节点
        var node = document.getElementById("mycanvas"); //传入的id名称
        // console.log("node", node);
        var width = node.offsetWidth; //dom宽
        var height = node.offsetHeight; //dom高
        var scale = 2; //放大倍数 这个相当于清晰度 调大一点更清晰一点
        html2canvas(node, {
          width: width,
          heigth: height,
          backgroundColor: "#ffffff", //背景颜色 为null是透明
          dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
          scale: scale,
          X: 0,
          Y: 0,
          scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多
          scrollY: -10,
          useCORS: true, //是否使用CORS从服务器加载图像 !!!
          allowTaint: true, //是否允许跨域图像污染画布  !!!
        }).then((canvas) => {
          // console.log("canvas", canvas);
          var url = canvas.toDataURL(); //这里上面不设值cors会报错
          var a = document.createElement("a"); //创建一个a标签 用来下载
          a.download = "名"; //设置下载的图片名称
          var event = new MouseEvent("click"); //增加一个点击事件
          this.dataURL = url;
			//如果需要下载的话就加上这两句
			a.href = url;//此处的url为base64格式的图片资源
	        a.dispatchEvent(event); //触发a的单击事件 即可完成下载
        });
    }

注意：如果是需要页面加载出来的时候就出现，一定要设置一个定时器，如果dom结构或者页面并没有加载完成，那么绘制出来的图是不完整的 如： setTimeout(() => { this.toImage(); }, 50);