blueimp-canvas-to-blob
Advanced tools
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.
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.
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);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.
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.
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.
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.
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>
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')
}
The JavaScript Canvas to Blob function has zero dependencies.
However, it is a very suitable complement to the JavaScript Load Image function.
The following browsers have native support for HTMLCanvasElement.toBlob:
Browsers which implement the following APIs support canvas.toBlob() via
polyfill:
This includes the following browsers:
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)
The JavaScript Canvas to Blob script is released under the MIT license.
FAQs
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.
The npm package blueimp-canvas-to-blob receives a total of 223,431 weekly downloads. As such, blueimp-canvas-to-blob popularity was classified as popular.
We found that blueimp-canvas-to-blob demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.