0

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

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的错误还是我做错了什么？

此代码适用于：

  • 铬安卓
  • 火狐桌面
  • 从文件资源管理器中选择文件时的 Firefox Android（而不是在单击输入字段时拍照）。
4

1 回答 1

0

我通过遵循这个 StackOverflow 答案和创建 blob 解决了这个问题。

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

于 2020-10-06T07:03:00.940 回答