Prise en charge de Canvas toBlob() dans Chrome 50.

Paul Lewis

L'élément canevas est mis à jour à partir de Chrome 50 et prend désormais en charge la méthode toBlob(). C'est une excellente nouvelle pour toute personne qui génère des images côté client et souhaite, par exemple, les importer sur leur serveur ou les stocker dans IndexedDB pour une utilisation ultérieure.

function sendImageToServer (canvas, url) {

    function onBlob (blob) {
    var request = new XMLHttpRequest();
    request.open('POST', url);
    request.onload = function (evt) {
        // Blob sent to server.
    }

    request.send(blob);
    }

    canvas.toBlob(onBlob);
}

L'utilisation de toBlob() est idéale, car au lieu de manipuler une chaîne encodée en base64 obtenue à partir de toDataURL(), vous pouvez désormais utiliser directement les données binaires encodées. Il est plus petit et a tendance à convenir à plus de cas d'utilisation qu'un URI de données.

Si vous vous demandez si vous pouvez dessiner des blobs d'image dans un autre contexte de canevas, la réponse est, dans Firefox et Chrome, oui, absolument ! Vous pouvez le faire avec l'API createImageBitmap(), qui est également disponible dans Chrome 50.