JavaScript Canvas to Blob
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');
if (canvas.toBlob) {
canvas.toBlob(
function (blob) {
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 if no AMD loader is used to load the script:
var b64Data = 'R0lGODdhUAA8AIABAAAAAP///ywAAAAAUAA8AAACS4SPqcvtD6' +
'OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofE' +
'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7',
imageUrl = 'data:image/gif;base64,' + b64Data,
blob = window.dataURLtoBlob && window.dataURLtoBlob(imageUrl);
Browsers
The following browsers support either the native or the polyfill canvas.toBlob() method:
Desktop browsers
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.