在vue 中使用html2canvas 遇到的坑

在vue 中使用html2canvas 遇到的坑

文档： html2canvas.hertzen.com/features

坑1 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题

坑2 ！！ 不要使用背景图片 ， 可能是我点背，，，主要是这引起的报错

建议使用最新版

<div  v-longpress="convert2canvas" :class="['moon-detail_block',this.$mn.Code]" id="shareContent" ref="referee">
  <div class="referee_wrap" :style="moon_Referee_obj">
    <img :src="currentSrc" alt="">
    <div class="referee_header" flex="cross:center dir:top">
        <div class="referee_tit">
          送你一张万能服
        </div>
        <div class="qrCode">
        </div>
      <div class="con">

      </div>
    </div>
  </div>
</div>
复制代码

methods
  convert2canvas(e) {
      console.log(e, "eeee,C2222222222CANVEWFW");
      console.log(this.$refs.referee, "refs");
      console.log(this.$mount, "mout");
      var shareContent = document.getElementById("shareContent"); // 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题
      var width = shareContent.offsetWidth; // 获取(原生）dom 宽度
      var height = shareContent.offsetHeight; // 获取(原生）dom 高
      var offsetTop = shareContent.offsetTop; //元素距离顶部的偏移量

      var canvas = document.createElement("canvas"); //创建canvas 对象
      var context = canvas.getContext("2d");
      var scaleBy = this.getPixelRatio(context); //获取像素密度的方法 (也可以采用自定义缩放比例)
      canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度，居中，所以没有偏移
      canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题
      context.scale(scaleBy, scaleBy);

      var opts = {
        allowTaint: true, //允许加载跨域的图片
        tainttest: true, //检测每张图片都已经加载完成
        scale: scaleBy, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        logging: true, //日志开关，发布的时候记得改成false
        width: width, //dom 原始宽度
        height: height //dom 原始高度
      };
      html2canvas(shareContent, opts).then(function(canvas) {
        console.log("html2canvas");
        console.log(canvas, "222222");
        var body = document.getElementsByTagName("body");
        body[0].appendChild(canvas);
      });
    },
      //获取像素密度
    getPixelRatio: function(context) {
      var backingStore =
        context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio ||
        1;
      return (window.devicePixelRatio || 1) / backingStore;
    },
复制代码

mounted() {
    this.convert2canvas();
  },
复制代码

长按指令
 directives: {
    longpress: {
      inserted: function(el) {
        console.log(el, "longpress");
      },
      bind: function(el, binding, vNode) {
        console.log(vNode, "bind");
        let pressTimer = null;

        // 定义函数处理程序
        // 创建计时器（ 1秒后执行函数 ）
        let start = e => {
          console.log(e, "eeeeeee");
          if (e.type === "click" && e.button !== 0) {
            return;
          }

          if (pressTimer === null) {
            pressTimer = setTimeout(() => {
              // 执行函数 长按
              handler();
            }, 1000);
          }
        };

        // 取消计时器
        let cancel = e => {
          // 检查计时器是否有值
          if (pressTimer !== null) {
            clearTimeout(pressTimer);
            pressTimer = null;
          }
        };

        // 运行函数
        const handler = e => {
          // 执行传递给指令的方法
          console.log(binding, "binding");
          binding.value(e);
        };

        // 添加事件监听器
        el.addEventListener("mousedown", start);
        el.addEventListener("touchstart", start);

        // 取消计时器
        el.addEventListener("click", cancel);
        el.addEventListener("mouseout", cancel);
        el.addEventListener("touchend", cancel);
        el.addEventListener("touchcancel", cancel);
      }
    }
  },
复制代码

转载于:https://juejin.im/post/5b7bd566e51d45597f5a2d47