wap网站服务器,深圳专业网络营销外包公司,旅游网站建设答辩ppt,贺州招聘网站建设最近在看前同事发我的vue3框架时#xff0c;发现他们有个功能是要实现页面截图功能。 vue3插件——vue-web-screen-shot——实现页面截图功能 效果图如下#xff1a;1.操作步骤1.1在项目中添加vvue-web-screen-shot组件1.2在项目入口文件导入组件——main.ts1.3在需要使用的页…最近在看前同事发我的vue3框架时发现他们有个功能是要实现页面截图功能。 vue3插件——vue-web-screen-shot——实现页面截图功能 效果图如下1.操作步骤1.1在项目中添加vvue-web-screen-shot组件1.2在项目入口文件导入组件——main.ts1.3在需要使用的页面使用组件1.4在页面截图后使用获得的64位编码转为图片文件形式进行上传 2.参考链接 效果图如下 最近项目遇到的要求是弹出框上传文件需要用到页面截图由于使用的是Vue3的框架于是选择用vue-web-screen-shot组件进行操作。(由于插件是Vue3编写的所以只适用于Vue3的项目如果是Vue2的项目截图组件可以使用js-web-screen-shot) 下面介绍实现步骤
1.操作步骤
1.1在项目中添加vvue-web-screen-shot组件 我这边安装的版本是1.5.2安装代码指令如下
yarn add vue-web-screen-shot或者
npm install vue-web-screen-shot --save1.2在项目入口文件导入组件——main.ts 在main.ts文件中导入组件
import screenShort from vue-web-screen-shot;
const createClient async():Promisevoid{const app createApp(App);app.use(screenShort,{enableWebRtc:false});app.mount(#app);
}1.3在需要使用的页面使用组件 a-upload refuploadRef v-model:file-listissueForm.fileList action/api/sys-storage/image/upload
:headers{Fusion-Auth:getToken()||,//此处放头部信息
}
:limit1
acceptimage/png,image/jpeg,image/jpg
image-preview
list-typepicture-card
:show-linktrue
:on-button-clickhandleButtonClick
/screen-short v-ifscreenshotStatus destroy-componentdestroyComponent get-image-datacompleteCallback/screen-short如果将screen-short组件放在弹出窗内部则隐藏弹出窗时会连同截屏组件一起隐藏所以建议放在外部并给弹出窗单独加一个div用showScreenShort控制弹出窗显示和隐藏。 参数说明 如示例代码所示在template中直接使用screen-short插件绑定组件需要的事件处理函数即可。 接下来就跟大家讲下组件中每个属性的意义
screenshotStatus用于控制组件是否出现在dom中
destroy-component用于接收截图组件传递的销毁消息我们需要在对应的函数中销毁截图组件
get-image-data用于接收截图组件传递的框选区的base64图片信息我们需要为他提供一个函数来接收截图组件传递的消息可选参数 截图插件有一个可选参数它接收一个对象对象每个key的作用如下
enableWebRtc是否启用webrtc值为boolean类型值为false则使用html2canvas来截图
level截图容器层级值为number类型
clickCutFullScreen单击截全屏启用状态值为boolean类型默认为false
hiddenToolIco需要隐藏的截图工具栏图标值为{save?:boolean;undo?:boolean;confirm?:boolean}类型默认为{}。传你需要隐藏的图标名称将值设为true即可。
enableCORShtml2canvas截图模式下跨域的启用状态值为boolean类型默认为false
proxyAddresshtml2canvas截图模式下的图片服务器代理地址值为string类型默认为undefined1.4在页面截图后使用获得的64位编码转为图片文件形式进行上传
script setup langts
const screenshotStatus refboolean(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;jbytes.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):PromiseFileList|void{event.preventDefault();screenshotStatus.value true;
}
/script2.参考链接
vue-web-screen-shot 前端实现页面截图https://blog.csdn.net/w1060436872/article/details/129065847
arco.design—上传 Uploadhttps://arco.design/vue/component/upload
