vue3實現(xiàn)頁面截圖功能示例詳解

更新時間：2024年10月25日 09:53:02 作者：小菜又鳥

在Vue3項目中實現(xiàn)頁面截圖的功能,可以通過使用js-web-screen-shot組件來實現(xiàn),本文以toolbox.js作為案例,詳細介紹了如何在Vue3框架下,利用js-web-screen-shot組件實現(xiàn)頁面截圖的具體步驟和方法,這一技術的應用,不僅可以提高用戶體驗,還能在需要時方便地獲取頁面的即時信息

項目場景：

vue3實現(xiàn)頁面截圖功能

描述

使用 js-web-screen-shot 組件

結果

解決方案：

頁面：

<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ū)--頁面截圖
const getCutValue = (e) => {
  createElementImg(e, textarea.value);
};

toolbox.js

//創(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("");
// 按鈕點擊時間方法，構建插件對象
const btnClick = () => {
  // 更多參數(shù) 和使用可以看它包里面的README.md文件
  const screenShotHandler = new ScreenShort({
    // 是否啟用webrtc，值為boolean類型，值為false則使用html2canvas來截圖
    enableWebRtc: false,
    // 層級級別，這個要比頁面上其他元素的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編碼的圖片
    // 通過atob將base64進行編碼
    var bytes = window.atob(url.split(",")[1]);
    // 處理異常，將ASCII碼小于0的轉(zhuǎn)換為大于0,進行二進制轉(zhuǎn)換
    var buffer = new ArrayBuffer(bytes.length);
    // 生成一個8位數(shù)的數(shù)組
    var uint = new Uint8Array(buffer);
    for (var j = 0; j < bytes.length; j++) {
      uint[j] = bytes.charCodeAt(j); // 根據(jù)長度返回相對應的Unicode 編碼
    }
    // Blob對象  // 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>

到此這篇關于vue3實現(xiàn)頁面截圖功能的文章就介紹到這了,更多相關vue3 頁面截圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: