Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
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 the standard JavaScript canvas.toBlob method.
It can be used to create Blob objects from an HTML canvas element.
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'
);
}
The JavaScript Canvas to Blob function has zero dependencies.
However, Canvas to Blob is a very suitable complement to the JavaScript Load Image function.
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);
The following browsers support either the native or the polyfill canvas.toBlob() method:
JavaScript Canvas to Blob Test
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 213,540 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.