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视频窗口 暂时未解决 要是大佬有解决办法望告知 感谢

__EOF__

本文作者：皮军旗
本文链接：https://www.cnblogs.com/pijunqi/p/14416223.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！