如何在Firefox Android上捕捉摄像头加载事件

Question

当我的用户在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安卓版的错误还是我做错了什么？

---

此代码适用于：

• Chrome Android
• Firefox桌面
• 从文件浏览器中选择文件时使用Firefox Android(而不是在单击输入字段时拍照(

Answer 1

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

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