Vue拖动截图功能的简单实现方法 Vue拖动截图功能的简单实现方

【Vue拖动截图功能的简单实现方法】拖动鼠标进行页面截图(也可指定区域拖动截图)
一、安装html2canvas、vue-cropper

npm i html2canvas --save//用于将指定区域转为图片npm i vue-cropper -S//将图片进行裁剪

二、在main.js注册vue-cropper组件

import VueCropper from 'vue-cropper'Vue.use(VueCropper)

三、页面中引入html2canvas

import html2canvas from "html2canvas"export default{}

四、代码分解
1、将指定区域转为图片

this.$nextTick(()=>{html2canvas(document.body,{}).then(canvas => {let dataURL = canvas.toDataURL("image/png"); this.uploadImg = dataURLthis.loading = true}); })

这里是将body整个页面转为图片，得到base64格式数据，其他区域直接获取class或者id
2、将生成的图片进行拖动截图

五、全部代码

.pop_alert{width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px dashed red; background-color: #000000; }.btn_box{position: absolute; top: 0; color: red; right: 0; font-size: 30px; display: flex; align-items: center; z-index: 6666; }

效果图