前端 用 canvas 和 Tesseract 实现在图片上选中文本并复制，注意要在图片里进行选中文本的操作

实现在图片上选中文本并复制，可以通过以下步骤实现：

1. 使用前端 Canvas 将图片加载并显示到页面上。
2. 监听 Canvas 的鼠标事件，记录鼠标位置，并在该位置创建一个隐藏的 input 元素。
3. 当鼠标按下时，将 input 元素设置为可见，并将焦点设置在该元素上。
4. 当鼠标移动时，根据鼠标位置计算出选中的区域，并将该区域的像素数据传递给 Tesseract.js 进行 OCR 处理。
5. 将识别出来的文本显示在 input 元素中，并在文本框中添加选中复制功能。

具体实现步骤如下：

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. 监听 Canvas 鼠标事件，创建 input 元素：

let input = null;

canvas.addEventListener('mousedown', e => {
  const x = e.clientX - canvas.offsetLeft;
  const y = e.clientY - canvas.offsetTop;

  input = document.createElement('input');
  input.style.position = 'absolute';
  input.style.top = `${y}px`;
  input.style.left = `${x}px`;
  input.style.opacity = '0';
  document.body.appendChild(input);

  input.focus();
});

canvas.addEventListener('mouseup', () => {
  if (input) {
    input.style.display = 'none';
    input = null;
  }
});

3. 计算选中的区域并传递给 Tesseract.js 进行 OCR 处理：

canvas.addEventListener('mousemove', e => {
  if (input) {
    const x = e.clientX - canvas.offsetLeft;
    const y = e.clientY - canvas.offsetTop;

    input.style.top = `${y}px`;
    input.style.left = `${x}px`;

    const imageData = ctx.getImageData(x, y, 10, 10);
    Tesseract.recognize(imageData)
      .then(result => {
        input.value = result.text;
      });
  }
});

4. 在 input 元素中添加选中复制功能：

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

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