Ondersteuning voor Canvas toBlob() toegevoegd in Chrome 50

Paul Lewis

Het canvas-element krijgt vanaf Chrome 50 een upgrade: het ondersteunt nu de toBlob() methode! Dit is geweldig nieuws voor iedereen die afbeeldingen aan de clientzijde genereert, die ze bijvoorbeeld naar hun server wil uploaden of ze in IndexedDB wil opslaan voor toekomstig gebruik.

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);
}

Het gebruik van toBlob() is geweldig, omdat je in plaats van een met base64 gecodeerde tekenreeks die je krijgt van toDataURL() te manipuleren, nu rechtstreeks met de gecodeerde binaire gegevens kunt werken. Het is kleiner en past doorgaans in meer gebruiksscenario's dan een gegevens-URI.

Als u zich afvraagt ​​of u afbeeldingsblobs naar een andere canvascontext kunt tekenen, is het antwoord -- in Firefox en Chrome -- ja, absoluut! U kunt dit doen met de createImageBitmap() API , die ook in Chrome 50 terechtkomt.