blueimp-canvas-to-blob - npm Package Compare versions

Comparing version 3.25.0 to 3.26.0

package.json

 {
   "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.",

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

No alert changes

Improved metrics

Total package byte prevSize

14620

increased by3.47%

Number of lines in readme file

136

increased by10.57%

No dependency changes