blueimp-canvas-to-blob

What is blueimp-canvas-to-blob?

The blueimp-canvas-to-blob npm package is a JavaScript library that provides a polyfill for the standard HTML5 canvas.toBlob method. This method allows you to convert canvas elements to Blob objects, which can then be used for file uploads, image processing, and other tasks that require binary data.

What are blueimp-canvas-to-blob's main functionalities?

Convert Canvas to Blob

This feature allows you to convert a canvas element to a Blob object. The code sample creates a canvas, draws a red rectangle on it, and then converts the canvas to a Blob object in PNG format.

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);
canvas.toBlob(function(blob) {
  console.log(blob);
}, 'image/png');

Specify Image Type and Quality

This feature allows you to specify the image type and quality when converting a canvas to a Blob. The code sample creates a canvas, draws a blue rectangle on it, and then converts the canvas to a JPEG Blob with 75% quality.

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
canvas.toBlob(function(blob) {
  console.log(blob);
}, 'image/jpeg', 0.75);

Other packages similar to blueimp-canvas-to-blob

canvas-toBlob

The canvas-toBlob package is another polyfill for the HTML5 canvas.toBlob method. It provides similar functionality to blueimp-canvas-to-blob, allowing you to convert canvas elements to Blob objects. The main difference is that canvas-toBlob is a smaller and more lightweight package.

html2canvas

The html2canvas package allows you to take screenshots of web pages or parts of web pages and convert them to canvas elements. While it offers more comprehensive functionality than blueimp-canvas-to-blob, it can also convert the resulting canvas to a Blob object. This makes it a more versatile but heavier option.

dom-to-image

The dom-to-image package enables you to convert DOM nodes to images, including canvas elements. It provides more flexibility in terms of what can be converted to an image, but it also includes the ability to convert the resulting canvas to a Blob object. This package is useful if you need to capture more than just canvas elements.

README

JavaScript Canvas to Blob

Contents

• Description
• Usage
• Requirements
• API
• Browsers
  • Desktop browsers
  • Mobile browsers
• Test
• License

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.