JavaScript Canvas to Blob
Contents
Description
Canvas to Blob is a polyfill for the standard JavaScript
canvas.toBlob
method.
It can be used to create
Blob objects from an
HTML canvas element.
Usage
Include the (minified) JavaScript Canvas to Blob script in your HTML markup:
<script src="js/canvas-to-blob.min.js"></script>
Then use the canvas.toBlob() method in the same way as the native
implementation:
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
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:
// 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:
npm i blueimp-canvas-to-blob
Requiring loads the dataURLtoBlob function.
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) - Apple Safari 6.0+ (see
Mozilla issue #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
License
The JavaScript Canvas to Blob script is released under the
MIT license.