整理的前端截图的方案

// 安装
npm install html2canvas
// 引入
import html2canvas from 'html2canvas'
// 使用
html2canvas(document.body).then(function(canvas) {
  document.body.appnedChild(canvas)
})

// 安装
npm install dom-to-image-more
// 引入
/* in ES 6 */
import domtoimage from "dom-to-image-more";
/* in ES 5 */
var domtoimage = require("dom-to-image-more");
// 使用
var node = document.getElementById("my-node");
domtoimage
  .toPng(node)
  .then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch(function (error) {
    console.error("oops, something went wrong!", error);
  });

// 容器
let imgFile, imgUrl;

// 点击进行截图
function leaderHandler() {
  // 创建标签
  const video = document.createElement("video");
  // 自动播放
  video.setAttribute("autoplay", "autoplay");
  // 静音
  video.setAttribute("muted", "muted");

  startCapture(function (screen) {
    video.srcObject = screen;
  });
  video.addEventListener("loadeddata", function () {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    // 设置一个宽高
    canvas.width = 1280;
    canvas.height = 773;
    if (!ctx) return;
    setTimeout(() => {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      let base64 = canvas.toDataURL("image/png");
      // 转为File对象
      imgFile = base64ImgtoFile(base64);
      // HACK 创建的地址 可以通过revokeObjectURL()清除以释放内存 是个优化点
      imgUrl =
        window.webkitURL.createObjectURL(img) ||
        window.URL.createObjectURL(img);
      // 停止以释放内存和停止分享流
      let tracks = video.srcObject.getTracks();
      tracks.forEach((track) => track.stop());
      video.srcObject = null;
    }, 250);
  });
}

// 开启视频流截屏
async function startCapture(success) {
  var constraints = {
    audio: false,
    video: true,
    width: 1280,
    height: 773,
  };
  if (navigator.mediaDevices?.getDisplayMedia) {
    navigator.mediaDevices.getDisplayMedia(constraints).then(success);
  } else {
    navigator.getDisplayMedia(constraints).then(success);
  }
}
// base64 转file对象
function base64ImgtoFile(data, filename = "file") {
  const arr = data.split(",");
  const mime = arr[0].match(/:(.*?);/)[1];
  const suffix = mime.split("/")[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime,
  });
}