vue引入截图功能并上传截图图片

文中提及的截图功能只针对于固定区域截图。用到的插件是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格式，传给后台进行图片上传