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

问题描述

当我的用户直接从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（而不是在输入字段上单击时拍照）。

解决方法

我通过遵循this StackOverflow answer和创建blob来解决了这个问题。

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