# JavaScript Canvas to Blob

## Contents

- [Description](#description)
- [Usage](#usage)
- [Requirements](#requirements)
- [API](#api)
- [Browsers](#browsers)
  - [Desktop browsers](#desktop-browsers)
  - [Mobile browsers](#mobile-browsers)
- [Test](#test)
- [License](#license)

## Description

Canvas to Blob is a polyfill for the standard JavaScript
[canvas.toBlob](http://www.w3.org/TR/html5/scripting-1.html#dom-canvas-toblob)
method.

It can be used to create
[Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) objects from an
HTML [canvas](https://developer.mozilla.org/en-US/docs/HTML/Canvas) element.

## Usage

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

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

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

```js
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](https://github.com/blueimp/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:

```js
// 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:

```shell
npm i blueimp-canvas-to-blob
```

Requiring loads the dataURLtoBlob function.

```js
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](https://code.google.com/p/chromium/issues/detail?id=67587))
- Apple Safari 6.0+ (see
  [Mozilla issue #648610](https://bugzilla.mozilla.org/show_bug.cgi?id=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](https://blueimp.github.io/JavaScript-Canvas-to-Blob/test/)

## License

The JavaScript Canvas to Blob script is released under the
[MIT license](https://opensource.org/licenses/MIT).
