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

Question

当我的用户 select 直接从 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 上（我需要它来执行 canvas 操作）但是加载事件未触发。

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 当 select 从文件资源管理器中编辑文件时（而不是在单击输入字段时拍照）。

Answer 1

我按照 this Whosebug answer 并创建了 blob 解决了这个问题。

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

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

How to catch camera load event on Firefox Android?

html

typescript

reactjs

firefox-android