JavaScript Canvas to Blob

Description

Canvas to Blob is a polyfill for the standard JavaScript canvas.toBlob method.

It can be used to create Blob objects from an HTML canvas element.

Usage

Include the (minified) JavaScript Canvas to Blob script in your HTML markup:

<script src="js/canvas-to-blob.min.js"></script>

Then use the canvas.toBlob() method in the same way as the native implementation:

var canvas = document.createElement('canvas');
/* ... your canvas manipulations ... */
if (canvas.toBlob) {
    canvas.toBlob(
        function (blob) {
            // Do something with the blob object,
            // e.g. creating a multipart form for file uploads:
            var formData = new FormData();
            formData.append('file', blob, fileName);
            /* ... */
        },
        'image/jpeg'
    );
}

Requirements

The JavaScript Canvas to Blob function has zero dependencies.

However, Canvas to Blob is a very suitable complement to the JavaScript Load Image function.

API

In addition to the canvas.toBlob polyfill, the JavaScript Canvas to Blob script provides one additional function called dataURLtoBlob, which is added to the global window object, unless the library is loaded via a module loader like RequireJS, Browserify or webpack:

// 80x60px GIF image (color black, base64 data):
var b64Data = 'R0lGODdhUAA8AIABAAAAAP///ywAAAAAUAA8AAACS4SPqcvtD6' +
        'OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofE' +
        'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7',
    imageUrl = 'data:image/gif;base64,' + b64Data,
    blob = window.dataURLtoBlob && window.dataURLtoBlob(imageUrl);

E.g. Via Npm/Browserify:

npm i blueimp-canvas-to-blob

Requiring loads the dataURLtoBlob function.

var dataURLtoBlob = require('blueimp-canvas-to-blob');

// 80x60px GIF image (color black, base64 data):
var b64Data = 'R0lGODdhUAA8AIABAAAAAP///ywAAAAAUAA8AAACS4SPqcvtD6' +
        'OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofE' +
        'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7',
    imageUrl = 'data:image/gif;base64,' + b64Data,
    blob = dataURLtoBlob(imageURL);

Browsers

The following browsers support either the native or the polyfill canvas.toBlob() method:

Desktop browsers

• Google Chrome (see Chromium issue #67587)
• Apple Safari 6.0+ (see Mozilla issue #648610)
• Mozilla Firefox 4.0+
• Microsoft Internet Explorer 10.0+

Mobile browsers

• Apple Safari Mobile on iOS 6.0+
• Google Chrome on iOS 6.0+
• Google Chrome on Android 4.0+

Test

JavaScript Canvas to Blob Test

License

The JavaScript Canvas to Blob script is released under the MIT license.