Das Canvas-Element wird ab Chrome 50 aktualisiert: Es unterstützt jetzt die toBlob()-Methode. Das ist eine gute Nachricht für alle, die Bilder clientseitig generieren und 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 sehr praktisch, da du nicht mehr einen base64-codierten String bearbeiten musst, den du von toDataURL() erhältst, sondern direkt mit den codierten Binärdaten arbeiten kannst. Er ist kleiner und eignet sich in der Regel für mehr Anwendungsfälle als ein Daten-URI.
Wenn Sie sich fragen, ob Sie Bild-Blobs in einen anderen Canvas-Kontext zeichnen können, lautet die Antwort in Firefox und Chrome: Ja, auf jeden Fall! Dazu können Sie die createImageBitmap() API verwenden, die ebenfalls in Chrome 50 eingeführt wird.