Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
blueimp-canvas-to-blob
Advanced tools
Readme
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 219,430 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.