如何通过按钮上传网络图片URL实现OCR文本提取？

要实现网络图片URL的OCR识别，你不能只改onchange为onclick——原来的type="file"输入框本身就是用来选择本地文件的，改事件触发方式根本解决不了问题。得从DOM结构和处理逻辑两方面修改：

1. 替换HTML输入控件 #

把原来的文件选择输入框，换成URL输入框和触发按钮：

<div class="content extra">
  <input id="imageUrl" type="text" placeholder="输入图片URL" style="margin-right:8px;">
  <button onclick="processUrlImage()">识别网络图片</button>
</div>

2. 新增网络图片处理函数 #

原来的proccess函数是处理本地File对象的，现在需要新增一个专门处理网络图片的函数，先加载图片、处理跨域，再传给Tesseract做OCR：

async function processUrlImage() {
  const url = document.getElementById('imageUrl').value.trim();
  if (!url) {
    alert('请输入有效的图片URL');
    return;
  }

  try {
    // 加载图片并处理跨域
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.src = url;

    // 等待图片加载完成
    await new Promise((resolve, reject) => {
      img.onload = resolve;
      img.onerror = reject;
    });

    // 将图片转为Canvas，适配Tesseract的输入要求
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

    // 调用Tesseract进行OCR识别
    const { data: { text } } = await Tesseract.recognize(
      canvas,
      'eng',
      { logger: m => console.log(m) }
    );

    // 展示识别结果（替换成你原来的结果展示DOM ID）
    document.getElementById('result').textContent = text;
    // 可以保留原来的window.lastFile逻辑，把Canvas转成Blob存储
    window.lastFile = await new Promise(resolve => canvas.toBlob(resolve));
  } catch (err) {
    console.error('识别失败:', err);
    alert('图片加载或识别失败，请检查URL是否有效、图片是否允许跨域访问');
  }
}

3. 注意事项 #

• 跨域问题：如果目标图片的服务器没有配置CORS，会导致图片加载失败，这时可以考虑用后端代理转发图片请求。
• 结果展示：确保document.getElementById('result')是你页面中用来显示OCR结果的DOM元素，和原来的代码逻辑保持一致。

内容的提问来源于stack exchange，提问作者James Tan