如何在 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 还是我做错了什么?
此代码适用于:
- Chrome Android
- Firefox 桌面
- Firefox Android 当 select 从文件资源管理器中编辑文件时(而不是在单击输入字段时拍照)。
我按照 this Whosebug answer 并创建了 blob 解决了这个问题。
base64 字符串在 firefox 中不起作用。
当我的用户 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 从文件资源管理器中编辑文件时(而不是在单击输入字段时拍照)。
我按照 this Whosebug answer 并创建了 blob 解决了这个问题。
base64 字符串在 firefox 中不起作用。