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:

``sh
npm 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:

`html

`

Or alternatively, include the non-minified version:

`html

`

Usage

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

`js
var canvas = document.createElement('canvas')
// Edit the canvas ...
if (canvas.toBlob) {
canvas.toBlob(function (blob) {
// Do something with the blob object,
// e.g. create multipart form data for file uploads:
var formData = new FormData()
formData.append('file', blob, 'image.jpg')
// ...
}, 'image/jpeg')
}
`

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):

`js
// Uncomment the following line when using a module loader like webpack:
// var dataURLtoBlob = require('blueimp-canvas-to-blob')

// black+white 3x2 GIF, base64 data:
var b64 = 'R0lGODdhAwACAPEAAAAAAP///yZFySZFySH5BAEAAAIALAAAAAADAAIAAAIDRAJZADs='
var url = 'data:image/gif;base64,' + b64
var blob = dataURLtoBlob(url)
``

Test

Unit tests

License

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