使用npm包js-web-screen-shot做网页截图，可以对截图加文字，箭头等等，类似于微信截图

  
    
      
        
      
    
    
      
        
          
            
              
                
                  
                
              
            
            
              
                
                  
                    点击上传
                    截图
                    
                      只能上传jpg/png文件，且不超过5M
                    
                  
                
              
            
          
        
      
      
        提交
        取消
      
    
  


import {
  Button,
  Tooltip,
  Dialog,
  Form,
  Row,
  Col,
  FormItem,
  Upload,
  Link,
  Input,
} from 'element-ui'
import html2canvas from 'html2canvas'
import ScreenShot from 'js-web-screen-shot'
import temp from './images/m-temp.jpg'
// import temp from '../../../bizapp/m-biz.jpg'
import temp2 from './images/m-temp2.jpg'
import './font/iconfont.css'
import './index.css'
let defaultFileList = [
  {
    name: 'food.jpg',
    url: temp,
  },
  {
    name: 'food2.jpg',
    url: temp2,
  },
]
export default {
  name: 'Feedback-Index',
  data() {
    return {
      visible: false,
      fileList: [...defaultFileList],
      form: {},
      // 表单校验
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
      },
      feedbackMouseY: 0,
      feedbackDragging: false,
      feedbackHeight: 200,
    }
  },
  components: {
    [Button.name]: Button,
    [Tooltip.name]: Tooltip,
    [Dialog.name]: Dialog,
    [Form.name]: Form,
    [Row.name]: Row,
    [Col.name]: Col,
    [FormItem.name]: FormItem,
    [Upload.name]: Upload,
    [Link.name]: Link,
    [Input.name]: Input,
  },
  mounted() {
    document.addEventListener('mousemove', this.handleMouseMove)
    document.addEventListener('mouseup', this.handleMouseUp)
  },
  methods: {
    handleCapture() {
      html2canvas(document.body).then(function (canvas) {
        document.body.appendChild(canvas)
      })
    },
    convertBase64UrlToBlob(urlData) {
      let bytes = window.atob(urlData.split(',')[1]) //去掉url的头，并转换为byte
      //处理异常,将ascii码小于0的转换为大于0
      let ab = new ArrayBuffer(bytes.length)
      let ia = new Uint8Array(ab)
      for (var i = 0; i  {
        try {
          new ScreenShot({
            enableWebRtc: false,
            completeCallback: this.callback,
            triggerCallback: this.triggerCallback,
          })
        } catch (error) {
          console.log(error)
        }
      }, 500)
    },
    callback(value) {
      this.visible = true
      console.log(value)
      let file = this.convertBase64UrlToBlob(value.base64)
      console.log(file)
      this.fileList = [
        ...this.fileList,
        {
          name: `${Date.now()}.png`,
          //url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          url: value.base64,
        },
      ]
    },
    triggerCallback() {
      this.visible = false
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log(this.form)
          this.visible = false
          this.$message({
            message: '成功',
            type: 'success',
          })
          this.$refs['form'].resetFields()
          this.fileList = [...defaultFileList]
        }
      })
    },
    handleClose() {
      this.visible = false
      this.$refs['form'].clearValidate()
      this.$refs['form'].resetFields()
      this.fileList = [...defaultFileList]
    },
    handleOpen() {
      this.visible = true
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.fileList = [...fileList]
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定删除这张图片吗？`, '提示', {
        type: 'warning',
        customClass: 'm-confirm',
      })
    },
    //#region 拖拽
    handleMouseMove(event) {
      if (this.feedbackDragging) {
        event.preventDefault()
        const deltaY = event.clientY - this.feedbackMouseY
        this.feedbackMouseY = event.clientY
        let tempFeedbackHeight = this.feedbackHeight + deltaY
        if (tempFeedbackHeight  window.innerHeight - 30) {
          tempFeedbackHeight = window.innerHeight - 30
        }
        this.feedbackHeight = tempFeedbackHeight
      }
    },
    handleMouseUp() {
      this.feedbackDragging = false
    },
    handleFeedbackDrag(event) {
      this.feedbackDragging = true
      this.feedbackMouseY = event.clientY
    },
    //#endregion
  },
}

我开发的chatgpt项目：

https://chat.xutongbao.top