前端 用 canvas 和 Tesseract 实现选中复制图片中的文字

实现选中复制图片中的文字，可以通过以下步骤实现：

1. 使用前端 Canvas 将图片加载并显示到页面上。
2. 使用 Tesseract.js 库对图片中的文字进行 OCR（光学字符识别）处理，将文字转换成可识别的文本。
3. 将识别出来的文本显示在页面上，并添加选中复制功能。

具体实现步骤如下：

1. 加载图片并显示在 Canvas 上：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const img = new Image();
img.src = 'image.png';
img.onload = () => {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
};

2. 使用 Tesseract.js 对图片进行 OCR 处理：

Tesseract.recognize(canvas.toDataURL())
  .then(result => {
    console.log(result.text);
  });

3. 将识别出来的文本显示在页面上，并添加选中复制功能：

const text = result.text;
const output = document.getElementById('output');
output.innerText = text;

output.addEventListener('mousedown', e => {
  e.preventDefault();
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(output);
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('copy');
});

这样就可以实现选中复制图片中的文字了。需要注意的是，Tesseract.js 对于一些特殊字体和字形可能会识别不准确，需要根据具体情况进行调整。