Resim Ön İzleme için base64 vs blob URL
Panelimde ürün ekleme, güncelleme gibi alanlarda çoklu resim ekleme alanı var, hem blob URL hemde base64 kodu elde ederek buraya görselleri listeleyebiliyorum, ancak base64 kodu üretebilmek için fileReader API'nin onload dosya işleyicisini kullanmam gerekiyor, dosya işleyicisi asenkron çalıştığı için onu ekstradan promise işlemine sokuyorum ve kodlar uzamaya başlıyor, sorum ise basit, resim önizlemesi yapmak için hangisini tercih etmeliyim?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
gokcin, blobURL veya base64 kodu kullanarak ön izleme yapabiliyorum, sadece merak ettiğim bir nokta var, blobURL ile yaptığım zaman az kod kullanıyorum ve daha hızlı çalışıyor, base64 kodu kullanarak yaptığım zaman daha çok kod yazmam gerekiyor ve daha yavaş çalışıyor ama image preview yapım videoları izlediğimde bir çok kişinin base64 kodu ile bu işlemi yaptığını gördüm, bilmediğim bir nokta mı var onu anlamaya çalışıyorum, yinede cevabın için teşekkür ederim :)
Örnek bir kullanım:
// File veya Blob nesnesini alın
var file = /* ... */;
// Blob URL oluşturun
var blobUrl = URL.createObjectURL(file);
// blobUrl'yi kullanarak resim önizlemesi yapın (örneğin, bir img etiketi içinde)
var img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);
// Blob URL'yi serbest bırakmayı unutmayın (performans ve bellek yönetimi için)
URL.revokeObjectURL(blobUrl);