基于canvas渲染图片识别结果支持文本可复制

环境:
cat package.json

  ...
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vant": "^2.12.3"
  },
  ....

demo只需要canvas,van-uploader,van-button即可完成

<template>
  <div class="roc">
      <canvas id="mycanvas" width="0" height="0" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
      <van-uploader :before-read="beforeRead" :after-read="afterRead"/>
      <div>使用时间: {{speed}}</div>
      <van-button type="primary" @click="doSubmit">提交</van-button>
  </div>
</template>

上传图片后,将图片渲染到canvas

    afterRead(file) {
      console.log(file);
      this.fileList[0] = file
      this.doDraw(file.content,null)
    },
	doDraw(file_content){
      var canvas = document.getElementById("mycanvas")
      var context = canvas.getContext('2d')
      var img = new Image()
      img.src = file_content
      img.onload = function(){
        if(img.complete){
          //  根据图像重新设定了canvas的长宽
          canvas.setAttribute("width",img.width)
          canvas.setAttribute("height",img.height)
          //  绘制图片
          context.drawImage(img,0,0,img.width,img.height)
        }
      }
    },

使用van-uploade上传图片到图片识别接口,获取到识别结果

	doSubmit() {
     var file = this.fileList[0]
     let that = this
     console.log(file);
     const form = new FormData()
     form.append('file', file.file)
     form.append('compress', 960)
     fetch('/api-ocr/api/tr-run/', {// 可以改为任意ocr接口
       method: 'POST',
       body: form,
     }).then((data) => {
         that.speed = data.speed_time // 识别速度
         that.drawTextLayar(data.raw_out) //识别后的图片和内容
     })
    },

开始渲染TextLayar层
创建一个与上传图片大小一致的div
将每一个识别结果写入到子div,再写入到总的div中

	drawTextLayar(dataList){
        // 0: (4) [[43, 60], [663, 60], Array(2), Array(2)]
        // 1: "1、 通过宝贝核心关键词一键查询类目归属"
        // 2: 0.7945398092269897
        // 创建一个TextLayer层的div
        var div = this.createContainer()
        dataList.forEach(e1 => {
            this.addLayar(e1[1],e1[0][0],div)
        });
    },
    createContainer(){
        var canvas = document.getElementById("mycanvas")
        var rect = canvas.getBoundingClientRect();
        // Create a Div
        var div = document.createElement("div");
        div.style.position = "absolute";
        div.style.zIndex = "100";
        div.style.width = rect.width+"px";
        div.style.height = rect.height+"px";
        document.body.appendChild(div);
        return div;
    },
    addLayar(text,position,container){
      const _text = text.split('、 ')[1] //简单处理下文字
      var textLayer = document.createElement("div");
      textLayer.innerHTML = _text;
      textLayer.style.position = "absolute";
      textLayer.style.top = (position[1]+5)+"px";
      textLayer.style.left = (position[0]+5)+"px";
      textLayer.style.zIndex = "100";
      textLayer.style.color = "black";
      textLayer.style.fontSize = "20px";
      textLayer.style.userSelect = "text";
      container.appendChild(textLayer);
    }

如此,显示的图片上层有一层文本层,可对文本进行复制操作