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

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

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

項(xiàng)目場景：

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

描述

使用 js-web-screen-shot 組件

結(jié)果

解決方案：

頁面：

<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("");
// 按鈕點(diǎn)擊時(shí)間方法，構(gòu)建插件對(duì)象
const btnClick = () => {
  // 更多參數(shù) 和使用可以看它包里面的README.md文件
  const screenShotHandler = new ScreenShort({
    // 是否啟用webrtc，值為boolean類型，值為false則使用html2canvas來截圖
    enableWebRtc: false,
    // 層級(jí)級(jí)別，這個(gè)要比頁面上其他元素的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進(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ù)長度返回相對(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>

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

您可能感興趣的文章: