如何在 Firefox Android 上捕捉相机加载事件？答案

【问题标题】：How to catch camera load event on Firefox Android?如何在 Firefox Android 上捕捉相机加载事件？
【发布时间】：2020-09-15 09:36:40
【问题描述】：

当我的用户在 Firefox Android 中直接从相机中选择图片时，我无法捕捉到加载事件。

我有一个触发此功能的图像输入字段：

const selectPicture = async () => {
    if (uploadPhotoRef.current?.files) {
      const reader = new FileReader();
      const file = uploadPhotoRef.current?.files[0];
      reader.readAsDataURL(file);

      reader.onloadend = async () => {
          let imageDataUrl = reader.result;
          const image = await createImage(imageDataUrl);
      }
   }
}

调试时，imageDataUrl 是一个有效的 base64 字符串，然后我尝试将它加载到 HTMLImageElement（我需要它来执行画布操作）但 load 事件是没有触发。

export const createImage = (url: string) =>
  new Promise<HTMLImageElement>((resolve, reject) => {
    const image = new Image();
    image.addEventListener('load', () => {
      // PROBLEM IS HERE, THIS FUNCTION IS NEVER ENTERED
      resolve(image);
    });
    image.addEventListener('error', error => reject(error));
    image.setAttribute('crossOrigin', 'anonymous');
    image.src = url;
  });

这是 Firefox Android 的错误还是我做错了什么？

此代码确实适用于：

Chrome Android
Firefox 桌面版
Firefox Android 从文件资源管理器中选择文件时（而不是在单击输入字段时拍照）。

【问题讨论】：

标签： html reactjs typescript firefox-android

【解决方案1】：

我通过关注this StackOverflow answer 并通过创建 blob 解决了这个问题。

base64 字符串在 firefox 中不起作用。

【讨论】：