<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);
// 功能區(qū)--頁(yè)面截圖
const getCutValue = (e) => {
  createElementImg(e, textarea.value);
};

//創(chuàng)建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("");
// 按鈕點(diǎn)擊時(shí)間方法，構(gòu)建插件對(duì)象
const btnClick = () => {
  // 更多參數(shù) 和使用可以看它包里面的README.md文件
  const screenShotHandler = new ScreenShort({
    // 是否啟用webrtc，值為boolean類型，值為false則使用html2canvas來(lái)截圖
    enableWebRtc: false,
    // 層級(jí)級(jí)別，這個(gè)要比頁(yè)面上其他元素的z-index的值大
    level: 2001,
    completeCallback: callback, // 截圖成功完成的回調(diào)
    closeCallback: closeFn, // 截圖取消的回調(diào)
  });
};
const callback = (base64data) => {
  var image = new Image();
  image.src = base64data.base64;
  image.onload = () => {
    var canvas = convertImageToCanvas(image);
    var url = canvas.toDataURL("image/jpeg"); // base64編碼的圖片
    // 通過(guò)atob將base64進(jìn)行編碼
    var bytes = window.atob(url.split(",")[1]);
    // 處理異常，將ASCII碼小于0的轉(zhuǎn)換為大于0,進(jìn)行二進(jìn)制轉(zhuǎn)換
    var buffer = new ArrayBuffer(bytes.length);
    // 生成一個(gè)8位數(shù)的數(shù)組
    var uint = new Uint8Array(buffer);
    for (var j = 0; j < bytes.length; j++) {
      uint[j] = bytes.charCodeAt(j); // 根據(jù)長(zhǎng)度返回相對(duì)應(yīng)的Unicode 編碼
    }
    // Blob對(duì)象  // type 為圖片的格式
    const blodImg = new Blob([buffer], { type: "image/jpeg" });
    exportimg.value = URL.createObjectURL(blodImg);
    emit("getCut", exportimg.value); // 觸發(fā)事件并傳遞數(shù)據(jù)
  };
};
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 = () => {
  // 取消截圖的回調(diào)
};
defineExpose({
  btnClick,
  callback,
  convertImageToCanvas,
  closeFn,
});
</script>
<style scoped></style>