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

How to catch camera load event on Firefox Android?

当我的用户 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 还是我做错了什么?


此代码适用于:

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

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