网页端截屏

1. 最开始选用的是html2canvas,但是我截屏的网页有iconfont字体，还有视频，用html2canvas截屏下来字体和视频是显示不完整的，所以就放弃了用这个。

2. 选用了domtoimage。

     vue使用 npm install domtoimage --save 

3

    import domtoimage from "dom-to-image";

     domtoimage.toJpeg(你要截屏的dom节点).then((dataURL) => {

        if (dataURL) {

            let alink = document.createElement("a");  // 这里是下载

            alink.href = dataURL;

            alink.download = "downloadImage.png";

            alink.click();

         }

      });

. 用domtoimage截屏下来的图片，字体是没有问题，但是视频依旧显示不出来。

4.我就使用canvas截视频成图片跟domtoimage结合。

5. canvas有个drawImage()方法可以在画布上绘制图像、画布或视频。 

 const video = document.querySelector("#video");

 const canvas = document.getElementById("picture");

 const ctx = canvas.getContext("2d");

 canvas.width = video.clientWidth;

 canvas.height = video.clientHeight;

 ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);

 const img = canvas.toDataURL("image/png");  // 将生成的canvas转成图片

6. 然后当我截屏的时候我把这张图片覆盖在视频上，截屏完成又隐藏这张图片，这个问题就解决了。