canvas.toBlob, tarayıcı biçiminizi kodlayamadığında sessizce PNG döndürür

Sessiz bir yerine koyma, hata değil

dev.to'da yayımlanan bir yazı, bir kullanıcı bildirimiyle başlayan bir hata avını anlatıyor: tarayıcı tabanlı bir görsel aracından dışa aktarılan .webp dosyaları masaüstünde açılmıyordu. Bir hex editörü sebebini açıkladı — dosyanın ilk baytları .webp uzantısına rağmen WebP'nin değil PNG'nin magic number değeriydi. Dışa aktarma kodu canvas.toBlob'a image/webp istemişti ve表面上 her şey yolunda görünüyordu: callback tetiklenmiş, blob null değildi ve boyutu makul görünüyordu.

Spesifikasyon bu geri dönüşü zorunlu kılıyor

Yazıda açıklandığı gibi bu davranış kazara değil, zorunlu. HTML spesifikasyonu, kullanıcı ajanı istenen görsel türünü üretemediğinde bunun yerine PNG üretmesi gerektiğini söylüyor — istisna fırlatmadan, log tutmadan, hiçbir yerde bu değişikliği bildirmeden; tek gösterge image/png okunacak olan blob.type. Yazar, 16.4'ün altındaki iOS sürümlerinin image/webp isteğine bu şekilde yanıt verdiğini belirtiyor. toDataURL aynı kuralı izliyor ama orada değişim en azından görünür, çünkü ortaya çıkan string data:image/png ile başlıyor.

Önceden sormanın bir yolu yok

Media API'leri geliştiricilere destek sorgulama imkânı veriyor — MediaRecorder.isTypeSupported ve navigator.mediaCapabilities.encodingInfo mevcut. Canvas kodlamasının böyle bir karşılığı yok: ne toBlob ne de toDataURL bir yetenek kontrolü sunuyor ve spesifikasyon bu geri dönüşü önceden tespit etmenin bir yolunu sunmadan tanımlıyor.

Yazı ayrıca user-agent koklamayı da eliyor. iOS'taki tüm tarayıcılar altta WebKit'tir, gömülü webview'ler sistem sürümünü bağımsız tarayıcıdan farklı takip eder ve 'Masaüstü Site İste' ayarı bir iPhone'un macOS user agent'ı sunmasına neden olur. Bir UA string'i tarayıcıyı tanımlar; kodlayıcısının o an ne yapabileceğini bildirmez.

Kodlayıcıyı yoklayın ve türleri karşılaştırın

Yazarın ulaştığı çözüm: minik bir canvas çizin, kodlamasını isteyin ve gerçekte ne döndüğüne bakın. Önemli noktalar:

• 1×1 yerine 2×2 bir canvas kullanın — bazı kodlayıcılar aykırı boyutlarda özel yollar izlediğinden 1×1 sonucu temsili olmayabilir.

• Yarı saydam bir renkle doldurun ki yoklama alpha kanalını da sinasın.

• Karar, blob.type'ın istenen MIME ile eşleşip eşleşmediğidir; null olmayan bir blob tek başına hiçbir şey kanıtlamaz.

• Sonucu oturum başına MIME türü bazında önbelleğe alın ve yoklamayı boş zamanda çalıştırın — örneğin ilk boyama sırasında ya da dönüştürme tıklamasında değil, bir dosya seçildikten sonra.

Bunu masaüstü Chromium'da çalıştıran yazar, image/webp ve image/jpeg'in normal kodlandığını, image/avif, image/heic, image/tiff ve image/gif isteklerinin ise birbirinin aynısı 95 baytlık PNG'ler döndürdüğünü gördü. Yalnızca bir null kontrolü altısını da destekleniyor olarak işaretleyecekti. AVIF satırı dikkat çekici: masaüstü Chrome AVIF'i sorunsuz çözüyor ama kodlamıyor, yani bu yalnızca mobilde görülen bir sorun değil.

Çözme de kendi yoklamasına ihtiyaç duyar

Yazının işaret ettiği gibi kodlama ve çözme ayrı kod yollarıdır — Safari 16 AVIF'i kodlayamadan çözebilir ve ana akım hiçbir şey HEIC kodlamaz. Çözme desteğini test etmek için o biçimde bir örnek dosya gerekir; yazar bunları küçük base64 data URL olarak satır içi gömmeyi öneriyor, çünkü ayrıştırılabilir bir 1×1 AVIF yalnızca birkaç yüz bayt tutuyor. Örneği fetch'leyin ve createImageBitmap çağırın: ya resolve olur ya da istisna fırlatır. Onload/onerror kullanan Image elementi daha az uygun, çünkü bazı tarayıcılar çözemedikleri dosyalar için naturalWidth değeri sıfırken onload tetikliyor.

Destek yoksa bunu söyleyin

Yazı, başarısızlık durumu için önerilerle kapanıyor: eşdeğer bir biçime geçin ve bunu açıklayın, bir WASM codec'i (libwebp, libavif veya libheif gibi) talep üzerine yükleyin (görseller cihazda kalarken kod cihaza iner) ya da bir sunucuya geri dönün — ama hangi yolun izlendiğini kullanıcı tıklamadan önce belirtin. HEIC çıktısı hâlâ çözülememiş vaka: HEVC lisanslaması ve kodlayıcı boyutu onu sunucu tarafına itiyor. imging.cn adlı tarayıcı tabanlı bir görsel aracı geliştiren yazar, işleyebilir bir istemci tarafı HEVC kodlayıcısı hâlâ arıyor.

Neden önemli

Bu nadir bir hata sınıfı: spesifikasyonla uyumlu, sessiz ve null kontrolüne görünmez. Görselleri istemci tarafında dışa aktaran, dönüştüren veya sıkıştıran her araç, geliştiricinin kendi tarayıcısı istenen biçimi desteklediği için kendi testleri geçerken bu hatayı taşıyabilir. Savunma tek bir karşılaştırmadan ibaret — dönen blob'un türü ile istenen MIME — artı cevap hayır olduğunda dürüst bir ele alış. Yazı aynı zamanda pratik bir kontrol listesi: kodlamayı yoklayın, çözmeyi ayrıca yoklayın, sonuçları önbelleğe alın ve asla kullanıcıya haber vermeden biçim değiştirmeyin.