https://github.com/blueimp/JavaScript-Canvas-to-Blob

JavaScript Canvas to Blob is a function to convert canvas elements into Blob objects.
https://github.com/blueimp/JavaScript-Canvas-to-Blob

Last synced: 2 months ago
JSON representation

JavaScript Canvas to Blob is a function to convert canvas elements into Blob objects.

• Host: GitHub
• URL: https://github.com/blueimp/JavaScript-Canvas-to-Blob
• Owner: blueimp
• License: mit
• Created: 2012-02-11T01:26:32.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2021-09-25T16:15:31.000Z (over 3 years ago)
• Last Synced: 2024-05-22T12:43:41.345Z (8 months ago)
• Language: JavaScript
• Homepage: https://blueimp.github.io/JavaScript-Canvas-to-Blob/test/
• Size: 869 KB
• Stars: 1,469
• Watchers: 64
• Forks: 395
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.txt

Awesome Lists containing this project

• awesome-canvas - JavaScript-Canvas-to-Blob - JavaScript Canvas to Blob is a function to convert canvas elements into Blob objects.   (Libraries / Data processing)

README

        
# JavaScript Canvas to Blob

## Contents

- [Description](#description)

- [Setup](#setup)

- [Usage](#usage)

- [Requirements](#requirements)

- [Browsers](#browsers)

- [API](#api)

- [Test](#test)

- [License](#license)

## Description

Canvas to Blob is a

[polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill) for

Browsers that don't support the standard JavaScript

[HTMLCanvasElement.toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/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/Web/HTML/Element/canvas)

element.

## Setup

Install via [NPM](https://www.npmjs.com/package/blueimp-canvas-to-blob):

```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](https://github.com/blueimp/JavaScript-Load-Image)

function.

## Browsers

The following browsers have native support for

[HTMLCanvasElement.toBlob](https://developer.mozilla.org/en-US/docs/Web/API/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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement)

- [HTMLCanvasElement.toDataURL](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)

- [Blob() constructor](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob)

- [atob](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/atob)

- [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)

- [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](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).