Kullanıcıların bir avatarı özelleştirmesine, resmi kırpmasına veya sadece bir resmi yakınlaştırmasına izin vermek için resimlerin kodunu tuvalle kullanıma uygun hale getirmek oldukça yaygın bir uygulamadır. Görüntülerin kodunu çözme işleminin CPU'yu yoğun olarak kullanması, bazen sarsıntı veya damalı görüntüler oluşmasına neden olabilir. Chrome 50'den itibaren (ve Firefox 42 ve sonraki sürümlerde) createImageBitmap() seçeneği de sunulmaktadır. Bu işlev, arka planda bir resmin kodunu çözmenize ve yeni bir ImageBitmap ilkel öğesine erişmenize olanak tanır. Bu ilkel öğeyi, <img> öğesi, başka bir kanvas veya videoyla aynı şekilde bir kanvas üzerine çizebilirsiniz.
createImageBitmap() ile nokta çizme
fetch() (veya XHR) ile bir blob resmi indirdiğinizi ve bu resmi tuvale çizmek istediğinizi varsayalım. createImageBitmap() olmadan, resmi kullanabileceğiniz bir biçime almak için bir resim öğesi ve Blob URL'si oluşturmanız gerekir. Bu sayede, boyama işlemini çok daha doğrudan bir şekilde gerçekleştirebilirsiniz:
fetch(url)
.then(response => response.blob())
.then(blob => createImageBitmap(blob))
.then(imageBitmap => ctx.drawImage(imageBitmap, 0, 0));
Bu yaklaşım, IndexedDB'de blob olarak depolanan görüntüler için de işe yarayacaktır. Bu da blob'ları orta düzeyde uygun bir biçimde gösterir. Chrome 50, tuval öğelerinde .toBlob() yöntemini de destekler. Bu sayede, örneğin tuval öğelerinden blob oluşturabilirsiniz.
Web çalışanlarında createImageBitmap() işlevini kullanma
createImageBitmap() ürününün en güzel özelliklerinden biri, çalışanlar için de kullanılabilmesidir. Yani artık istediğiniz yerde resimlerin kodunu çözebiliyorsunuz. Kodunu çözmeniz gereken ve gerekli olmadığını düşündüğünüz çok sayıda resim varsa URL'lerini bir web çalışanına gönderirsiniz. Bu çalışan, zaman uygun olduğunda resimleri indirip kodlarını çözer. Daha sonra bunları tuvale çizim yapmak için tekrar ana iş parçacığına aktarır.
Bunu yapmak için kullanacağınız kod şu şekilde görünebilir:
// In the worker.
fetch(imageURL)
.then(response => response.blob())
.then(blob => createImageBitmap(blob))
.then(imageBitmap => {
// Transfer the imageBitmap back to main thread.
self.postMessage({ imageBitmap }, [imageBitmap]);
}, err => {
self.postMessage({ err });
});
// In the main thread.
worker.onmessage = (evt) => {
if (evt.data.err)
throw new Error(evt.data.err);
canvasContext.drawImage(evt.data.imageBitmap, 0, 0);
}
Günümüzde ana iş parçacığında createImageBitmap() çağrısı yaptığınızda kod çözme işlemi tam olarak burada gerçekleşir. Ancak planlar, ana iş parçacığının iş yükünü azaltarak Chrome'un başka bir iş parçacığındaki kodu çözme işlemini otomatik olarak yapmasını sağlamaktır. Ancak bu süre içinde de kodu çözme işlemini ana iş parçacığında yapma konusunda dikkatli olmalısınız. Çünkü bu işlem JavaScript, stil hesaplamaları, düzen, boyama veya birleştirme gibi diğer temel görevleri engelleyebilecek yoğun bir çalışmadır.
Yardımcı kitaplık
İşinizi biraz daha kolaylaştırmak için, kod çözme işlemini çalışanda gerçekleştiren, kod çözülmüş resmi ana iş parçacığına geri gönderen ve bir kanvas üzerine çizen bir yardımcı kitaplık oluşturdum. Elbette, tersine mühendislik yapıp modeli kendi uygulamalarınıza uygulamaktan çekinmeyin. En büyük avantaj daha fazla kontrol sahibi olmaktır ancak bu (her zaman olduğu gibi) <img> öğesi kullanmaktan daha fazla kod, daha fazla hata ayıklama ve daha fazla uç durumla birlikte gelir.
Resim kodu çözme konusunda daha fazla kontrole ihtiyacınız varsa createImageBitmap() en iyi arkadaşınızdır. Chrome 50'de bu özelliği deneyin ve deneyiminizi bizimle paylaşın.