Skip to content
Branch: master
Go to file
Code

Latest commit

blueimp committed 53743bc May 13, 2020

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 

README.md

JavaScript Canvas to Blob

Contents

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:

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:

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

Or alternatively, include the non-minified version:

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

Usage

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

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:

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

// 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.

About

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

Resources

License

Sponsor this project

 
Learn more about GitHub Sponsors
You can’t perform that action at this time.