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

Usage

Include the (minified) JavaScript Canvas to Blob script in your HTML markup:

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

In your application code, use the canvasToBlob() function like this:

var canvas = document.createElement('canvas'); 
/* ... your canvas manipulations ... */
if(!canvasToBlob(
    canvas,
    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);
        /* ... */
    },
    {
        type: fileType,
        name: fileName // Only used by Mozilla Firefox
    }
)) {
    /* ... alternative code for unsupported browsers ... */
};

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

The canvasToBlob() function expects a canvas element as first argument and a callback function as second argument. An options object with the properties name (e.g. "image.png") and image (e.g. "image/png") can be provided as optional third argument.

The function returns true if the browser supports canvas to blob conversion. It calls the provided callback function with the created blob as argument.

License

The JavaScript Canvas to Blob script is released under the MIT license.