文中提及的截图功能只针对于固定区域截图。用到的插件是html2canvas
1.项目中引入html2canvas 。官网地址:html2canvas - Screenshots with JavaScript
Install NPM
npm install --save html2canvas
Install Yarn
yarn add html2canvas
2.在需要截图功能的vue文件中引入组件,或者全局引入
import html2canvas from "html2canvas"
3.在需要截图的区域中加一个div
4.点击截图按钮时就可以获取到ref区域的图片了,具体代码看下图:
其中dataURL为base64格式,base64ToBlob函数为把base格式地址转为Blob格式,传给后台进行图片上传