Надежный предварительный просмотр изображения состоит из двух отдельных задач: декодирования представления Base64 и декодирования результирующего формата изображения. Строка может пройти первый шаг и не пройти второй, потому что файл усечен, неправильно помечен или не поддерживается браузером. Покажите эти состояния отдельно.
Поддерживайте байт-ориентированный конвейер
Удалите распознанную оболочку данных URI через анализатор, проверьте Base64 и получите Uint8Array. Не направляйте байты изображения через текстовый декодер. Если вам нужен простой локальный предварительный просмотр, оберните байты в Blob и создайте объект URL. Это позволяет избежать сборки еще одной большой строки Base64 только для отображения результата.
// bytes is a validated Uint8Array; type comes from checked raster metadata.
async function previewRaster(bytes, type, imageElement) {
const allowed = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'];
if (!allowed.includes(type)) throw new Error('Unsupported raster preview type');
const url = URL.createObjectURL(new Blob([bytes], { type }));
try {
imageElement.src = url;
await imageElement.decode();
return { width: imageElement.naturalWidth, height: imageElement.naturalHeight,
dispose: () => URL.revokeObjectURL(url) };
} catch (error) {
URL.revokeObjectURL(url);
imageElement.removeAttribute('src');
throw error;
}
}Храните объект URL только столько, сколько необходимо.
Вызовите возвращаемую функцию удаления при замене или удалении предварительного просмотра. Повторные просмотры без очистки сохраняют ресурсы браузера. Не отзывайте URL до загрузки образа и не используйте повторно удаленный URL для последующей загрузки. Если загрузки должны оставаться доступными, управляйте их сроком службы отдельно.
Используйте реальную обратную связь от декодера изображений
Подпись файла — это лишь начальная подсказка. Шаг декодирования элемента изображения проверяет, может ли браузер действительно загрузить его, и отображает его размеры. Ошибка здесь должна говорить о том, что декодирование изображения не удалось, при этом исходные байты были сохранены для проверки или загрузки. Он не должен перезаписывать входные данные или сообщать о том, что алфавит Base64 недействителен.
По возможности применяйте ограничения в байтах и размерах перед дорогостоящим рендерингом. Небольшой сжатый файл может описать очень большое изображение. Не рассматривайте SVG как обычные растровые полезные данные: это структурированная разметка с различными соображениями безопасности. Никогда не вводите неизвестные SVG или HTML непосредственно на страницу, чтобы предварительный просмотр работал.
Наконец, отличайте предварительный просмотр от конвертации. Отображение JPEG в элементе изображения не создает PNG. Для преобразования необходимо нарисовать декодированное изображение на холсте и экспортировать выбранный формат с четким выбором качества и прозрачности. Оболочка Data URI описана в MDN: URL-адреса данных; Успех предварительного просмотра остается проверкой формата браузера, а не общей сертификацией безопасности.