Das Canvas-Element erhält ab Chrome 50 ein Upgrade: Es unterstützt jetzt die Methode toBlob(). Das sind gute Neuigkeiten für alle, die Bilder auf Clientseite generieren und sie beispielsweise auf ihren Server hochladen oder zur späteren Verwendung in IndexedDB speichern möchten.
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);
}
Die Verwendung von toBlob() ist großartig, da Sie jetzt direkt mit den codierten Binärdaten arbeiten können, anstatt einen base64-codierten String zu bearbeiten, den Sie aus toDataURL() erhalten. Sie ist kleiner und passt tendenziell zu mehr Anwendungsfällen als eine Daten-URI.
Wenn Sie sich fragen, ob Sie Bild-Blobs in einem anderen Canvas-Kontext zeichnen können, lautet die Antwort - in Firefox und Chrome - Ja, unbedingt! Das ist mit der createImageBitmap() API möglich, die auch in Chrome 50 verfügbar ist.