JavaScript Canvas to Blob

Contents

• Description
• Setup
• Usage
• Requirements
• Browsers
• API
• Test
• License

Description

Canvas to Blob is a polyfill for Browsers that don't support the standard JavaScript HTMLCanvasElement.toBlob method.

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

Setup

Install via NPM:

1npm install blueimp-canvas-to-blob

This will install the JavaScript files inside ./node_modules/blueimp-canvas-to-blob/js/ relative to your current directory, from where you can copy them into a folder that is served by your web server.

Next include the minified JavaScript Canvas to Blob script in your HTML markup:

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

Or alternatively, include the non-minified version:

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

Usage

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

1var canvas = document.createElement('canvas')
2// Edit the canvas ...
3if (canvas.toBlob) {
4  canvas.toBlob(function (blob) {
5    // Do something with the blob object,
6    // e.g. create multipart form data for file uploads:
7    var formData = new FormData()
8    formData.append('file', blob, 'image.jpg')
9    // ...
10  }, 'image/jpeg')
11}

Requirements

The JavaScript Canvas to Blob function has zero dependencies.

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

Browsers

The following browsers have native support for HTMLCanvasElement.toBlob:

• Chrome 50+
• Firefox 19+
• Safari 11+
• Mobile Chrome 50+ (Android)
• Mobile Firefox 4+ (Android)
• Mobile Safari 11+ (iOS)
• Edge 79+

Browsers which implement the following APIs support canvas.toBlob() via polyfill:

• HTMLCanvasElement
• HTMLCanvasElement.toDataURL
• Blob() constructor
• atob
• ArrayBuffer
• Uint8Array

This includes the following browsers:

• Chrome 20+
• Firefox 13+
• Safari 8+
• Mobile Chrome 25+ (Android)
• Mobile Firefox 14+ (Android)
• Mobile Safari 8+ (iOS)
• Edge 74+
• Edge Legacy 12+
• Internet Explorer 10+

API

In addition to the canvas.toBlob() polyfill, the JavaScript Canvas to Blob script exposes its helper function dataURLtoBlob(url):

1// Uncomment the following line when using a module loader like webpack:
2// var dataURLtoBlob = require('blueimp-canvas-to-blob')
3
4// black+white 3x2 GIF, base64 data:
5var b64 = 'R0lGODdhAwACAPEAAAAAAP///yZFySZFySH5BAEAAAIALAAAAAADAAIAAAIDRAJZADs='
6var url = 'data:image/gif;base64,' + b64
7var blob = dataURLtoBlob(url)

Test

Unit tests

License

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