Güvenilir bir görüntü önizlemesinin iki ayrı işi vardır: Base64 gösteriminin kodunu çözmek ve ortaya çıkan görüntü formatının kodunu çözmek. Dosyanın kesilmesi, yanlış etiketlenmesi veya tarayıcı tarafından desteklenmemesi nedeniyle bir dize ilk adımı geçebilir ve ikincisinde başarısız olabilir. Bu durumları ayrı ayrı gösterin.
Bayt odaklı bir ardışık düzen tutun
Tanınan bir Veri URI sarmalayıcısını bir ayrıştırıcı aracılığıyla kaldırın, Base64 doğrulayın ve bir Uint8Array edinin. Görüntü baytlarını bir metin kod çözücü aracılığıyla yönlendirmeyin. Basit bir yerel önizleme istiyorsanız baytları bir Blob'a sarın ve URL nesnesini oluşturun. Bu, yalnızca sonucu görüntülemek için başka bir büyük Base64 dizesinin birleştirilmesini önler.
// 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 nesnesini yalnızca gerektiği kadar tutun
Önizlemeyi değiştirirken veya kaldırırken döndürülen imha işlevini çağırın. Temizlemeden tekrarlanan önizlemeler tarayıcı kaynaklarını korur. Bir görüntü yüklenmeden önce URL'yi iptal etmeyin ve atılan URL'yi daha sonra indirmek için yeniden kullanmayın. İndirilenlerin kullanılabilir kalması gerekiyorsa bunların ömrünü ayrı olarak yönetin.
Gerçek görüntü kod çözücü geri bildirimini kullanın
Dosya imzası yalnızca bir başlangıç ipucudur. Resim öğesinin kod çözme adımı, tarayıcının onu gerçekten yükleyip yükleyemediğini kontrol eder ve boyutlarını ortaya çıkarır. Buradaki bir hata, inceleme veya indirme için orijinal baytları korurken görüntü kod çözme işleminin başarısız olduğunu belirtmelidir. Girişin üzerine yazılmamalı veya Base64 alfabesinin geçersiz olduğunu bildirmemelidir.
Mümkün olduğunda pahalı işlemeden önce bayt ve boyut sınırlarını uygulayın. Küçük bir sıkıştırılmış dosya çok büyük bir görüntüyü tanımlayabilir. SVG'yi sıradan bir raster verisi olarak ele almaktan kaçının: bu, farklı güvenlik hususları içeren yapılandırılmış bir işaretlemedir. Önizlemenin çalışması için asla bilinmeyen SVG veya HTML öğesini doğrudan sayfaya enjekte etmeyin.
Son olarak, önizlemeyi dönüştürmeden ayırın. Bir resim öğesinde JPEG öğesinin görüntülenmesi PNG oluşturmaz. Dönüştürme, kodu çözülmüş bir görüntünün bir tuvale çizilmesini ve seçilen formatın belirgin kalite ve şeffaflık seçenekleriyle dışa aktarılmasını gerektirir. Veri URI sarmalayıcısı şurada açıklanmıştır: MDN: veri URL'leri; önizleme başarısı genel bir güvenlik sertifikası değil, tarayıcı biçimi kontrolü olarak kalır.