Chrome, Chrome 50'de createImageBitmap() işlevini destekler

Paul Lewis

Kullanıcıların avatar özelleştirmesine, resmi kırpmasına veya yalnızca bir resmi yakınlaştırmasına olanak tanımak için, tuvallerde resimlerin kod çözme işlemi yaygın olarak kullanılmaktadır. Resimlerin kodunun çözülmesiyle ilgili sorun, CPU'nun yoğun olarak çalışması ve bazen duraklama veya dama tahtası gibi durumlara yol açabilmesidir. Chrome 50'den itibaren (ve Firefox 42 ve üstü sürümlerde) artık başka bir seçeneğiniz var: createImageBitmap(). Arka planda bir resmin kodunu çözmenizi ve <img> öğesi, başka bir tuval veya videoyla olduğu gibi bir tuvale çizebileceğiniz yeni bir ImageBitmap temel öğesine erişim elde etmenizi sağlar.

createImageBitmap() kullanarak blob çizme

fetch() (veya XHR) ile bir blob resmi indirdiğinizi ve bunu bir tuvale çizmek istediğinizi varsayalım. createImageBitmap() olmasaydı resmi kullanabileceğiniz bir biçime getirmek için bir resim öğesi ve Blob URL'si oluşturmanız gerekirdi. Bu araç sayesinde, boyamaya çok daha doğrudan bir yoldan ulaşabiliyorsunuz:

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 işe yarayacak ve blob'ları uygun bir ara biçime dönüştürecektir. Gerçekleştiğinde Chrome 50, tuval öğelerinde .toBlob() yöntemini de destekler. Bu sayede, örneğin tuval öğelerinden blob oluşturabilirsiniz.

Web çalışanlarında createImageBitmap() kullanma

createImageBitmap() ürününün en güzel özelliklerinden biri, çalışanlar tarafından da kullanılabilmesidir. Böylece artık resimlerin kodunu istediğiniz yerde çözebilirsiniz. Çözülmesi gereken çok sayıda görseliniz varsa ve bunların gerekli olmadığını düşündüğünüz çok sayıda resminiz varsa, bunların URL'lerini bir web işçisine gönderirsiniz. Web işçisi, bu resimleri zaman içinde indirir ve kodunu çözer. Ardından, tuvale çizmek için bunları tekrar ana iş parçacığına aktarır.

createImageBitmap ve web çalışanları ile veri akışı.

Bu işlemi gerçekleştirmek için gereken kod aşağıdaki gibi 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);
}

Bugün ana iş parçacığında createImageBitmap() çağırırsanız kod çözme işlemi tam olarak burada yapılacak. Ancak planlar, Chrome'un kod çözme işlemini başka bir iş parçacığında otomatik olarak yapmasını, böylece ana iş parçacığının iş yükünü azaltmaya yardımcı olmasını sağlamayı planlıyor. Bu arada, JavaScript, stil hesaplamaları, düzen, boyama veya birleştirme gibi diğer önemli görevleri engelleyebilecek yoğun bir iş olduğundan kod çözme işlemini ana iş parçacığında yapma konusunda dikkatli olmalısınız.

Yardımcı kitaplık

İşi biraz kolaylaştırmak için, bir çalışan üzerinde kod çözme işlemini gerçekleştiren ve kodu çözülmüş resmi ana iş parçacığına geri gönderip tuvale çizen yardımcı bir kitaplık oluşturdum. Elbette isterseniz tersine mühendislik yapabilir ve modeli kendi uygulamalarınıza uygulayabilirsiniz. En önemli avantajı daha fazla kontrol imkanı sunmasıdır. Ancak bu özellik (her zaman olduğu gibi), <img> öğesi kullanmaya kıyasla değerlendirilecek daha fazla kod, hata ayıklamak için daha fazla ve daha fazla uç durum içerir.

Resim kodu çözme konusunda daha fazla kontrole ihtiyacınız varsa createImageBitmap() yeni en iyi arkadaşınız. Chrome 50'de bu uygulamaya göz atın ve deneyimlerinizi bizimle paylaşın.