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 = dataURL
     this.loading = true
   });
 })

这里是将body整个页面转为图片，得到base64格式数据，其他区域直接获取class或者id

2、将生成的图片进行拖动截图

五、全部代码

效果图

总结

到此这篇关于Vue拖动截图功能实现的文章就介绍到这了,更多相关Vue拖动截图功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！