在vue中把Dom元素转成图片并下载到本地或者几张图片图片合成为一张

Dom元素转图片都是用canvas来实现的(常用于营销图的制作,自定义图片合成等需求) 推荐使用html2canvas来实现 html2canvas文档

第一步安装

npm install html2canvas --save

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

import html2canvas from "html2canvas"

第三部构建
----html

   <div  class="canvas_box" id="mycanvas" ref="mycanvas">
   //里面放置图片等元素(需要合成到图片里的元素)
   </div>
   //还需要一个合成按钮
   <button @click="saveImg('mycanvas')">合 成</button>

-----methods

  saveImg(val) {
      window.pageYoffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      // 先获取你要转换为img的dom节点
      var node = document.getElementById(val);//传入的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: 0,
        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");//增加一个点击事件
        a.href = url;//此处的url为base64格式的图片资源
        a.dispatchEvent(event); //触发a的单击事件 即可完成下载
      });
    },

特别注意: 如果元素内有网络图片地址 即服务器路径要给图片dom设置行内 crossOrigin='Anonymous’ !!!
另外有些css样式不支持导出 如文字超出盒子显示…等 导出就为空白 具体查看文档 更换元素css设置再导出