vue中使用html2canvas截取div内容转为图片

1.首先引用jquery和html2canvas

  方法略 不会的请百度

2.添加截图按钮

 <button type="button" id="savePic" class="btn btn-primary btn-sm mixStream" v-on:click="savePic" >截图</button>

3.创建方法

  savePic: function () {
      var getPixelRatio = function(context) { // 获取设备的PixelRatio
        var backingStore = context.backingStorePixelRatio ||
          context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          context.msBackingStorePixelRatio ||
          context.oBackingStorePixelRatio ||
          context.backingStorePixelRatio || 1;
        return (window.devicePixelRatio || 1) / backingStore;
      };
      var shareContent = $("#finalDa")[0];
      var width = shareContent.offsetWidth;
      var height = shareContent.offsetHeight;
      var canvas = document.createElement("canvas");
      var context = canvas.getContext(2d);
      var scale = getPixelRatio(context);
      canvas.width = width * scale;
      canvas.height = height * scale;
      canvas.style.width = width + px;
      canvas.style.height = height + px;
      context.scale(scale, scale);

      var opts = {
        useCORSOnly: true,
        // allowTaint :true,
        scale: scale,
        canvas: canvas,
        width: width,
        height: height,
        dpi: window.devicePixelRatio
      };

      html2canvas(shareContent, opts).then(function(canvas) {
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        var dataUrl = canvas.toDataURL(image/jpeg, 1.0);
        var newImg = document.createElement("img");
        newImg.src = dataUrl;
        newImg.width = width;
        newImg.height = height;
        alert("截取成功,上拉查看图片");

        $("body")[0].appendChild(newImg);
      });
    },

 PS:截取一般的网页没问题 但是无法截取video视频窗口 暂时未解决 要是大佬有解决办法望告知 感谢

vue中使用html2canvas截取div内容转为图片

上一篇:CSS样式-颜色color


下一篇:webpack中使用Vue时需要的配置