隨著時間的發展，前端開發的范圍越來越廣，能夠實現的功能也越來越多，要實現的功能也五花八門，今天就給大家介紹一個web截圖庫,讓前端也能實現截圖功能——?js-web-screen-shot
js-web-screen-shot
js-web-screen-shot?是一個基于 JavaScript 的網頁截圖工具，允許開發者在瀏覽器中直接對網頁進行截圖。這個工具可以在純前端環境中運行，不需要服務器端的支持，非常適合用于前端開發和調試
目前有兩個版本，一個是純js版本，一個是vue3版本
特點
-
純前端實現：無需后端服務，完全在瀏覽器中運行。
-
多種格式支持：可以將截圖保存為 PNG、JPEG 等格式。
-
自定義截圖區域：支持對整個頁面、指定元素或特定區域進行截圖。
-
跨瀏覽器兼容：支持主流瀏覽器（如 Chrome、Firefox、Edge 等）。
-
簡單易用：通過簡單的 API 調用即可完成截圖操作。
安裝使用
js版本
安裝
npm?install?js-web-screen-shot
使用
import?ScreenShot??from?"js-web-screen-shot";
const?imgSrc?=?ref("")
const?begainScreen?=?()?=>?{console.log("開始截屏")new?ScreenShot?({enableWebRtc:?false,??level:?9999,??//層級級別completeCallback:?callback});
}
const?callback?=?(base64data:any)=>{console.log(base64data);imgSrc.value?=?base64data.base64
}
vue3使用
安裝
npm?install?vue-web-screen-shot?--save
在項目的入口文件main.ts/main.js引入插件
//?導入截屏插件
import?screenShort?from?"vue-web-screen-shot";
const?app?=?createApp(App);
//?使用截屏插件
app.use(screenShort,?{?enableWebRtc:?false?})
在組件中使用
<template><!--截圖組件--><screen-short?v-if="screenshotStatus"@destroy-component="destroyComponent"@get-image-data="getImg"></screen-short>
</template><script?lang="ts">export?default?defineComponent({setup(props,?context)?{const?screenshotStatus?=?ref<boolean>(false);//?銷毀組件函數const?destroyComponent?=?function(status:?boolean)?{screenshotStatus.value?=?status;}//?獲取裁剪區域圖片信息const?getImg?=?function(base64:?string)?{console.log("截圖組件傳遞的圖片信息",?base64);}return?{screenshotStatus,destroyComponent,getImg}}
})
</script>
js-web-screen-shot里有很高的自由度，可以通過配置參數來決定是否顯示某個功能icon,并且監聽回調函數
同時插件還監聽了三個快捷鍵：
-
Esc，按下鍵盤上的esc鍵時，等同于點了工具欄的關閉圖標。
-
Enter，按下鍵盤上的enter鍵時，等同于點了截圖工具欄的確認圖標。
-
Ctrl/Command + z，按下這兩個組合鍵時，等同于點了截圖工具欄的撤銷圖標。
js-web-screen-shot?提供了兩種截圖模式：webrtc 和 html2canvas,如果不開啟 enableWebRtc那么就會使用html2canvas 截圖模式，更多的使用方式大家可以觀看文檔~
https://gitee.com/likai119/js-screen-shot
??——EOF——
福利：
掃碼回復【酒店】可免費領取酒店管理系統源碼
