Kullanıcıların bir avatarı özelleştirmesine, resmi kırpmasına veya sadece resmi yakınlaştırmasına izin vermek için resimlerin kodunun çözülmesi oldukça yaygındır. Görüntülerin kodunun çözülmesi, CPU'yu yoğun olarak kullanabileceğinden bazen takılma veya kareli görüntüler oluşabilir. 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 tuval veya videoyla aynı şekilde bir tuvale çizebilirsiniz.
createImageBitmap() ile nokta çizme
fetch() (veya XHR) ile bir blob resmi indirdiğinizi ve bunu bir 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 resimlerle de çalışır. Bu da blob'ları kullanışlı bir ara biçim haline getirir. 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()'ün en güzel özelliklerinden biri, çalışanlarda da kullanılabilmesidir. Bu sayede artık istediğiniz yerde resimlerin kodunu çözebilirsiniz. Kodunun çözülmesi gereken ve gerekli olmadığını düşündüğünüz çok sayıda resminiz varsa URL'lerini bir web çalışanına gönderirsiniz. Bu çalışan, zaman uygun olduğunda resimleri indirip kodlarını çözer. Ardından, tuval üzerine çizim yapmak için bunları ana iş parçacığına geri aktarır.
Bunu yapmak için kullanacağınız kod şu şekilde olabilir:
// 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, Chrome'un kod çözme işlemini başka bir iş parçacığında otomatik olarak yapmasına yönelik. Bu sayede ana iş parçacığının iş yükü azaltılabilir. Ancak bu sırada, JavaScript, stil hesaplamaları, düzen, boyama veya kompozisyon gibi diğer önemli görevleri engelleyebilecek yoğun bir çalışma olduğundan kod çözme işlemini ana iş parçacığında yapmanız gerekir.
Yardımcı kitaplık
İşinizi biraz daha kolaylaştırmak için, kod çözme işlemini bir ç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 kod çözme konusunda daha fazla kontrole ihtiyacınız varsa createImageBitmap() sizin için idealdir. Chrome 50'de bu özelliği inceleyin ve deneyiminizi bizimle paylaşın.