vue3实现页面截图功能示例详解

<cut ref="cutRef" @getCut="getCutValue"></cut>
<div
  ref="textarea"
  class="input_message"
  contenteditable="true"
></div>
import { ref} from "vue";
import cut from "../../toolbox/cut/index.vue";
import { createElementImg } from "../../../utils/base/toolbox";
const cutRef = ref(null);
// 功能区--页面截图
const getCutValue = (e) => {
  createElementImg(e, textarea.value);
};

//创建img
const createElementImg = (e, vnode, w = 200, h = 0) => {
  const img = document.createElement("img");
  img.src = e;
  img.alt = "图片加载失败";
  img.width = w;
  if (h) {
    img.height = h;
  }
  vnode.appendChild(img);
};
export { createElementImg };

<template>
  <div></div>
</template>
<script setup>
import { ref } from "vue";
import ScreenShort from "js-web-screen-shot";
import { defineEmits } from "vue";
// 定义 emit 事件
const emit = defineEmits();
const exportimg = ref("");
// 按钮点击时间方法，构建插件对象
const btnClick = () => {
  // 更多参数 和使用可以看它包里面的README.md文件
  const screenShotHandler = new ScreenShort({
    // 是否启用webrtc，值为boolean类型，值为false则使用html2canvas来截图
    enableWebRtc: false,
    // 层级级别，这个要比页面上其他元素的z-index的值大
    level: 2001,
    completeCallback: callback, // 截图成功完成的回调
    closeCallback: closeFn, // 截图取消的回调
  });
};
const callback = (base64data) => {
  var image = new Image();
  image.src = base64data.base64;
  image.onload = () => {
    var canvas = convertImageToCanvas(image);
    var url = canvas.toDataURL("image/jpeg"); // base64编码的图片
    // 通过atob将base64进行编码
    var bytes = window.atob(url.split(",")[1]);
    // 处理异常，将ASCII码小于0的转换为大于0,进行二进制转换
    var buffer = new ArrayBuffer(bytes.length);
    // 生成一个8位数的数组
    var uint = new Uint8Array(buffer);
    for (var j = 0; j < bytes.length; j++) {
      uint[j] = bytes.charCodeAt(j); // 根据长度返回相对应的Unicode 编码
    }
    // Blob对象  // type 为图片的格式
    const blodImg = new Blob([buffer], { type: "image/jpeg" });
    exportimg.value = URL.createObjectURL(blodImg);
    emit("getCut", exportimg.value); // 触发事件并传递数据
  };
};
const convertImageToCanvas = (image) => {
  var canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  canvas.getContext("2d").drawImage(image, 0, 0);
  return canvas;
};
const closeFn = () => {
  // 取消截图的回调
};
defineExpose({
  btnClick,
  callback,
  convertImageToCanvas,
  closeFn,
});
</script>
<style scoped></style>