使用vue-quill-editor实现图片截图复制粘贴上传

ZD717822023

已于 2024-03-28 11:01:43 修改

阅读量828

点赞数 9

文章标签： vue.js javascript ecmascript

于 2024-03-27 19:54:42 首次发布

本文链接：https://blog.csdn.net/ZD717822023/article/details/137086944

版权

本文介绍了如何在Vue前端项目中，利用VueQuillEditor富文本组件处理运营需求的图片OCR识别，包括监听粘贴事件、处理图片base64编码上传至CDN，并调用OCR接口进行文字识别。

摘要由CSDN通过智能技术生成

需求

运营需要用多张图片进行OCR识别，图片来源一般是运营的截图，直接粘贴过来，然后需求请求OCR截图提交图片list，粘贴图片的同时需要上传图片到cdn地址；

分析

一个输入框（富文本框），这里没有用到富文本本身带的上传图片工具，如有用到直接配置上传图片就可以
需要监听粘贴事件clipboardData
监听粘贴事件上传图片
获取所有粘贴的图片地址请求ocr接口

代码

<div class="ocr-content">
  <quill-editor ref="myQuillEditor" v-model="quillContent" :options="editorOption"></quill-editor>
</div>

data () {
  return {
    quillContent: '',
    editorOption: {
        theme: 'snow', // or 'bubble'
        placeholder: '将图片按Ctrl+V 粘贴至此处',
        modules: {
          clipboard: {
            matchers: [
              ['img', this.handlePasteImg]
            ]
          },
          toolbar: false
        }
      }
  }
},
methods: {
	handlePasteImg(node, delta) {
      let ops = []
      delta.ops.forEach(async (op, index) => {
        if (op.insert && typeof op.insert !== 'string') {  // 如果粘贴了图片，这里会是一个对象
          if (op.insert.image) {
            if (op.insert.image.includes(';base64')) {
              let file = this.dataURLtoFile(op.insert.image, `paste-${Math.random().toString(36).slice(-8)}.jpg`)
              const [res, err] = await apiService.getUploadToken()
              if (err) return false
              // key 值可以自己用当前日期生成
              let key = `page/${getCurrentDate('/')}/${new Date().getTime()}${Math.random().toString(36).slice(-8)}.jpg`
              let origin = res.data.picture.origin
              const fd = new FormData()
              fd.append('key', key)
              fd.append('token', res.data.picture.token)
              fd.append('origin', origin)
              fd.append('time', new Date().getTime())
              fd.append('file', file)
              apiService.uploadImage(fd).then(
                res => {
                  console.log(res, 'res')
                  let quill = this.$refs.myQuillEditor.quill // 获取富文本对象
                  let length = quill.getSelection().index     // 获取编辑器光标位置
                  quill.insertEmbed(length, 'image', `${origin}/${res.key}`) // 插入图片  图片地址
                  quill.setSelection(length + 1)              // 光标后移一位   调整光标到最后
                })
                .catch(err => {
                  console.log(err)
                })
            }
          }
        }
      })
      delta.ops = ops  // 不加会报错
      return delta
    },
    dataURLtoFile(dataurl, name) {
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while(n--){
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], name, {type:mime})
    },
    // 提取富文本中image中的src
    extractImageSrc(htmlString) {
      let imgSrcArray = []
      let imgTagRegex = /<img[^>]+src=['"]([^'"]+)['"][^>]*>/g
      let match
      
      while ((match = imgTagRegex.exec(htmlString)) !== null) {
        let src = match[1]
        imgSrcArray.push(src)
      }
      return imgSrcArray
    },
    // ocr识别
    async handleImageOCR() {
      if (!this.quillContent) {
        this.$Message.error('请上传图片！')
        return false
      }
      let imageList = this.extractImageSrc(this.quillContent)
      if (Array.isArray(imageList) && imageList.length) {
        const [res, err] = await service.ocrResult(imageList)
        if (err) return
        if (res.ok && res.data) {
          this.ocrDescribe = res.data
        } 
      }
    },
}