L'élément canvas est mis à niveau à partir de Chrome 50: il est désormais compatible avec la méthode toBlob(). C'est une excellente nouvelle pour toute personne qui génère des images côté client et qui souhaite, par exemple, les importer sur son serveur ou les stocker dans IndexedDB pour les utiliser ultérieurement.
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 intéressante, car au lieu de manipuler une chaîne encodée en base64 obtenue à partir de toDataURL(), vous pouvez désormais travailler directement avec les données binaires encodées. Il est plus petit et convient à davantage 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 oui, absolument ! (dans Firefox et Chrome). Pour ce faire, utilisez l'API createImageBitmap(), qui est également disponible dans Chrome 50.