最近在看前同事發(fā)我的vue3框架時(shí)，發(fā)現(xiàn)他們有個(gè)功能是要實(shí)現(xiàn)頁(yè)面截圖功能。
效果圖如下：
最近項(xiàng)目遇到的要求是彈出框上傳文件，需要用到頁(yè)面截圖，由于使用的是Vue3的框架于是選擇用vue-web-screen-shot組件進(jìn)行操作。(由于插件是Vue3編寫的，所以只適用于Vue3的項(xiàng)目，如果是Vue2的項(xiàng)目，截圖組件可以使用js-web-screen-shot)
下面介紹實(shí)現(xiàn)步驟：
1.操作步驟
1.1在項(xiàng)目中添加vvue-web-screen-shot組件
我這邊安裝的版本是1.5.2，安裝代碼指令如下：
yarn add vue-web-screen-shot
或者
npm install vue-web-screen-shot --save
1.2在項(xiàng)目入口文件導(dǎo)入組件——main.ts
在main.ts文件中導(dǎo)入組件
import screenShort from 'vue-web-screen-shot';
const createClient = async():Promise<void>=>{
const app = createApp(App);
app.use(screenShort,{enableWebRtc:false});
app.mount('#app');
}
1.3在需要使用的頁(yè)面使用組件
<a-upload ref="uploadRef" v-model:file-list="issueForm.fileList" action="/api/sys-storage/image/upload"
:headers="{
'Fusion-Auth':getToken()||'',//此處放頭部信息
}"
:limit="1"
accept="image/png,image/jpeg,image/jpg"
image-preview
list-type="picture-card"
:show-link="true"
:on-button-click="handleButtonClick"
/>
<screen-short v-if="screenshotStatus" @destroy-component="destroyComponent" @get-image-data="completeCallback"></screen-short>
如果將screen-short組件放在彈出窗內(nèi)部，則隱藏彈出窗時(shí)會(huì)連同截屏組件一起隱藏，所以建議放在外部，并給彈出窗單獨(dú)加一個(gè)div，用showScreenShort控制彈出窗顯示和隱藏。
參數(shù)說(shuō)明：
如示例代碼所示，在template中直接使用screen-short插件，綁定組件需要的事件處理函數(shù)即可。
接下來(lái)就跟大家講下組件中每個(gè)屬性的意義：
screenshotStatus：用于控制組件是否出現(xiàn)在dom中
@destroy-component：用于接收截圖組件傳遞的銷毀消息，我們需要在對(duì)應(yīng)的函數(shù)中銷毀截圖組件
@get-image-data：用于接收截圖組件傳遞的框選區(qū)的base64圖片信息，我們需要為他提供一個(gè)函數(shù)來(lái)接收截圖組件傳遞的消息
可選參數(shù)
截圖插件有一個(gè)可選參數(shù)，它接收一個(gè)對(duì)象，對(duì)象每個(gè)key的作用如下：
enableWebRtc：是否啟用webrtc，值為boolean類型，值為false則使用html2canvas來(lái)截圖
level：截圖容器層級(jí)，值為number類型
clickCutFullScreen：?jiǎn)螕艚厝羻⒂脿顟B(tài)，值為boolean類型，默認(rèn)為false
hiddenToolIco：需要隱藏的截圖工具欄圖標(biāo)，值為{save?:boolean;undo?:boolean;confirm?:boolean}類型，默認(rèn)為{}。傳你需要隱藏的圖標(biāo)名稱，將值設(shè)為true即可。
enableCORS：html2canvas截圖模式下跨域的啟用狀態(tài)，值為boolean類型，默認(rèn)為false
proxyAddress：html2canvas截圖模式下的圖片服務(wù)器代理地址，值為string類型，默認(rèn)為undefined
1.4在頁(yè)面截圖后使用獲得的64位編碼轉(zhuǎn)為圖片文件形式進(jìn)行上傳
<script setup lang="ts">
const screenshotStatus = ref<boolean>(false);
const destroyComponent = (status:boolean)=>{
screenshotStatus.value = status;
}
const completeCallback = async (base64data:any)=>{
const bytes = window.atob(base64data.split(',')[1]);
const buffer = new ArrayBuffer(bytes.length);
const uint = ew Uint8Array(buffer);
for(let j = 0;j<bytes.length:j++){
uint[j] = bytes.charCodeAt(j);
}
const imageFile = new Blob([buffer],{type:'image/jpeg'});
const formData = new FormData();
formData.append('file',imageFile,`${Data.now()}.jpeg`);
const res = await fileUpload(formData);
if(res.status){
curPicToken.value = res.data.fileToken;
issueForm.fileList = [];
issueForm.fileList.push({
url:`/api/sys-storage/download_image?f8s=${res.data.fileToken]`,
})
}
}
const handleButtonClick = (event:Event):Promise<FileList>|void=>{
event.preventDefault();
screenshotStatus.value = true;
}
</script>
2.參考鏈接：
vue-web-screen-shot 前端實(shí)現(xiàn)頁(yè)面截圖：https://blog.csdn.net/w1060436872/article/details/129065847文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-755665.html
arco.design—上傳 Upload：https://arco.design/vue/component/upload文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-755665.html
到了這里，關(guān)于vue3插件——vue-web-screen-shot——實(shí)現(xiàn)頁(yè)面截圖功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
