Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
blueimp-canvas-to-blob
Advanced tools
blueimp-canvas-to-blob - npm Package Compare versions
Comparing version 3.25.0 to 3.26.0
| { | ||
| "name": "blueimp-canvas-to-blob", | ||
| "version": "3.25.0", | ||
| "version": "3.26.0", | ||
| "title": "JavaScript Canvas to Blob", | ||
@@ -5,0 +5,0 @@ "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.", |
137
README.md
@@ -6,8 +6,7 @@ # JavaScript Canvas to Blob | ||
| - [Description](#description) | ||
| - [Setup](#setup) | ||
| - [Usage](#usage) | ||
| - [Requirements](#requirements) | ||
| - [Browsers](#browsers) | ||
| - [API](#api) | ||
| - [Browsers](#browsers) | ||
| - [Desktop browsers](#desktop-browsers) | ||
| - [Mobile browsers](#mobile-browsers) | ||
| - [Test](#test) | ||
@@ -18,4 +17,6 @@ - [License](#license) | ||
| Canvas to Blob is a polyfill for the standard JavaScript | ||
| [canvas.toBlob](http://www.w3.org/TR/html5/scripting-1.html#dom-canvas-toblob) | ||
| Canvas to Blob is a | ||
| [polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill) for | ||
| Browsers that don't support the standard JavaScript | ||
| [HTMLCanvasElement.toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) | ||
| method. | ||
@@ -25,8 +26,19 @@ | ||
| [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) objects from an | ||
| HTML [canvas](https://developer.mozilla.org/en-US/docs/HTML/Canvas) element. | ||
| HTML [canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) | ||
| element. | ||
| ## Usage | ||
| ## Setup | ||
| Include the (minified) JavaScript Canvas to Blob script in your HTML markup: | ||
| Install via [NPM](https://www.npmjs.com/package/blueimp-canvas-to-blob): | ||
| ```sh | ||
| 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: | ||
| ```html | ||
@@ -36,3 +48,11 @@ <script src="js/canvas-to-blob.min.js"></script> | ||
| Then use the _canvas.toBlob()_ method in the same way as the native | ||
| Or alternatively, include the non-minified version: | ||
| ```html | ||
| <script src="js/canvas-to-blob.js"></script> | ||
| ``` | ||
| ## Usage | ||
| You can use the `canvas.toBlob()` method in the same way as the native | ||
| implementation: | ||
@@ -42,10 +62,10 @@ | ||
| var canvas = document.createElement('canvas') | ||
| /* ... your canvas manipulations ... */ | ||
| // Edit the canvas ... | ||
| if (canvas.toBlob) { | ||
| canvas.toBlob(function(blob) { | ||
| canvas.toBlob(function (blob) { | ||
| // Do something with the blob object, | ||
| // e.g. creating a multipart form for file uploads: | ||
| // e.g. create multipart form data for file uploads: | ||
| var formData = new FormData() | ||
| formData.append('file', blob, fileName) | ||
| /* ... */ | ||
| formData.append('file', blob, 'image.jpg') | ||
| // ... | ||
| }, 'image/jpeg') | ||
@@ -59,66 +79,59 @@ } | ||
| However, Canvas to Blob is a very suitable complement to the | ||
| However, it is a very suitable complement to the | ||
| [JavaScript Load Image](https://github.com/blueimp/JavaScript-Load-Image) | ||
| function. | ||
| ## API | ||
| ## Browsers | ||
| 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: | ||
| The following browsers have native support for | ||
| [HTMLCanvasElement.toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob): | ||
| ```js | ||
| // 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) | ||
| ``` | ||
| - Chrome 50+ | ||
| - Firefox 19+ | ||
| - Safari 11+ | ||
| - Mobile Chrome 50+ (Android) | ||
| - Mobile Firefox 4+ (Android) | ||
| - Mobile Safari 11+ (iOS) | ||
| - Edge 79+ | ||
| E.g. Via Npm/Browserify: | ||
| Browsers which implement the following APIs support `canvas.toBlob()` via | ||
| polyfill: | ||
| ```shell | ||
| npm i blueimp-canvas-to-blob | ||
| ``` | ||
| - [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) | ||
| - [HTMLCanvasElement.toDataURL](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) | ||
| - [Blob() constructor](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob) | ||
| - [atob](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/atob) | ||
| - [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) | ||
| - [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) | ||
| Requiring loads the dataURLtoBlob function. | ||
| This includes the following browsers: | ||
| ```js | ||
| var dataURLtoBlob = require('blueimp-canvas-to-blob') | ||
| - Chrome 20+ | ||
| - Firefox 13+ | ||
| - Safari 8+ | ||
| - Mobile Chrome 25+ (Android) | ||
| - Mobile Firefox 14+ (Android) | ||
| - Mobile Safari 8+ (iOS) | ||
| - Edge 74+ | ||
| - Edge Legacy 12+ | ||
| - Internet Explorer 10+ | ||
| // 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) | ||
| ``` | ||
| ## API | ||
| ## Browsers | ||
| In addition to the `canvas.toBlob()` polyfill, the JavaScript Canvas to Blob | ||
| script exposes its helper function `dataURLtoBlob(url)`: | ||
| The following browsers support either the native or the polyfill | ||
| _canvas.toBlob()_ method: | ||
| ```js | ||
| // Uncomment the following line when using a module loader like webpack: | ||
| // var dataURLtoBlob = require('blueimp-canvas-to-blob') | ||
| ### Desktop browsers | ||
| // black+white 3x2 GIF, base64 data: | ||
| var b64 = 'R0lGODdhAwACAPEAAAAAAP///yZFySZFySH5BAEAAAIALAAAAAADAAIAAAIDRAJZADs=' | ||
| var url = 'data:image/gif;base64,' + b64 | ||
| var blob = dataURLtoBlob(url) | ||
| ``` | ||
| - Google Chrome (see | ||
| [Chromium issue #67587](https://code.google.com/p/chromium/issues/detail?id=67587)) | ||
| - Apple Safari 6.0+ (see | ||
| [Mozilla issue #648610](https://bugzilla.mozilla.org/show_bug.cgi?id=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](https://blueimp.github.io/JavaScript-Canvas-to-Blob/test/) | ||
| [Unit tests](https://blueimp.github.io/JavaScript-Canvas-to-Blob/test/) | ||
@@ -125,0 +138,0 @@ ## License |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.47%
14620
- Number of lines in readme file
- increased by10.57%
136
No dependency changes