Chrome Dev Summit is back! Visit to secure your spot in workshops, office hours and learning lounges!

Canvas toBlob() Support Added in Chrome 50

The canvas element is getting an upgrade as of Chrome 50: it now supports the toBlob() method! This is great news for anyone generating images on the client side, who wants to -- say -- upload them to their server, or store them in IndexedDB for future use.

function sendImageToServer (canvas, url) {

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



Using toBlob() is great, because instead of manipulating a base64 encoded string that you get from toDataURL(), you can now you work with the encoded binary data directly. It’s smaller, and it tends to fit more use-cases than a data URI.

If you’re wondering whether you can draw image blobs to another canvas context, the answer is -- in Firefox and Chrome -- yes, absolutely! You can do this with the createImageBitmap() API, which is also landing in Chrome 50.