ReactJS调用API前翻转Base64图片解决前置摄像头镜像导致身份证OCR识别异常

你可以通过浏览器原生Canvas API完成翻转处理，无需引入第三方依赖，处理完成后直接导出Base64传给OCR接口即可。

实现核心逻辑 #

• 先将原始Base64字符串加载到Image对象
• 利用Canvas上下文的scale(-1,1)方法实现X轴水平翻转，配合位移修正画面偏移
• 将翻转后的Canvas内容重新导出为Base64格式

完整可复用代码 #

/**
 * 对Base64格式图片执行水平左右翻转
 * @param {string} base64Img 原始Base64图片字符串，支持带data URI前缀
 * @param {number} quality 导出图片质量，取值范围0-1，仅对jpeg/webp格式生效
 * @returns {Promise<string>} 翻转后的Base64图片字符串
 */
function flipBase64Horizontal(base64Img, quality = 0.9) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 处理跨域图片场景，本地Base64可忽略
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      // 画布尺寸和原图保持一致
      canvas.width = img.width;
      canvas.height = img.height;
      // 水平翻转核心逻辑
      ctx.scale(-1, 1);
      ctx.drawImage(img, -img.width, 0, img.width, img.height);
      // 导出为Base64
      const flippedBase64 = canvas.toDataURL('image/jpeg', quality);
      resolve(flippedBase64);
    };
    img.onerror = () => reject(new Error('图片加载失败，请检查Base64格式有效性'));
    img.src = base64Img;
  });
}

调用示例 #

// 替换为你实际获取的摄像头拍摄的Base64
const originalOcrBase64 = 'xxx';
flipBase64Horizontal(originalOcrBase64, 0.95)
  .then(flippedBase64 => {
    // 此处直接将flippedBase64传入OCR识别接口即可
    console.log('翻转处理完成');
  })
  .catch(err => console.error('处理失败:', err));

注意事项 #

• 若需要保留原图的png透明通道，可将toDataURL的第一个参数改为'image/png'，此时quality参数不生效
• 处理超大分辨率图片时可先对原图做等比压缩，避免导出的Base64体积过大影响接口请求效率

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