Skip to content

Commit cd4b03b

Browse files
committedMay 10, 2020
Docs: Update browser support, setup and API info.
1 parent 4a890fa commit cd4b03b

File tree

1 file changed

+79
-66
lines changed

1 file changed

+79
-66
lines changed
 

‎README.md

+79-66
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,66 @@
33
## Contents
44

55
- [Description](#description)
6+
- [Setup](#setup)
67
- [Usage](#usage)
78
- [Requirements](#requirements)
8-
- [API](#api)
99
- [Browsers](#browsers)
10-
- [Desktop browsers](#desktop-browsers)
11-
- [Mobile browsers](#mobile-browsers)
10+
- [API](#api)
1211
- [Test](#test)
1312
- [License](#license)
1413

1514
## Description
1615

17-
Canvas to Blob is a polyfill for the standard JavaScript
18-
[canvas.toBlob](http://www.w3.org/TR/html5/scripting-1.html#dom-canvas-toblob)
16+
Canvas to Blob is a
17+
[polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill) for
18+
Browsers that don't support the standard JavaScript
19+
[HTMLCanvasElement.toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)
1920
method.
2021

2122
It can be used to create
2223
[Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) objects from an
23-
HTML [canvas](https://developer.mozilla.org/en-US/docs/HTML/Canvas) element.
24+
HTML [canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas)
25+
element.
2426

25-
## Usage
27+
## Setup
28+
29+
Install via [NPM](https://www.npmjs.com/package/blueimp-canvas-to-blob):
2630

27-
Include the (minified) JavaScript Canvas to Blob script in your HTML markup:
31+
```sh
32+
npm install blueimp-canvas-to-blob
33+
```
34+
35+
This will install the JavaScript files inside
36+
`./node_modules/blueimp-canvas-to-blob/js/` relative to your current directory,
37+
from where you can copy them into a folder that is served by your web server.
38+
39+
Next include the minified JavaScript Canvas to Blob script in your HTML markup:
2840

2941
```html
3042
<script src="js/canvas-to-blob.min.js"></script>
3143
```
3244

33-
Then use the _canvas.toBlob()_ method in the same way as the native
45+
Or alternatively, include the non-minified version:
46+
47+
```html
48+
<script src="js/canvas-to-blob.js"></script>
49+
```
50+
51+
## Usage
52+
53+
You can use the `canvas.toBlob()` method in the same way as the native
3454
implementation:
3555

3656
```js
3757
var canvas = document.createElement('canvas')
38-
/* ... your canvas manipulations ... */
58+
// Edit the canvas ...
3959
if (canvas.toBlob) {
40-
canvas.toBlob(function(blob) {
60+
canvas.toBlob(function (blob) {
4161
// Do something with the blob object,
42-
// e.g. creating a multipart form for file uploads:
62+
// e.g. create multipart form data for file uploads:
4363
var formData = new FormData()
44-
formData.append('file', blob, fileName)
45-
/* ... */
64+
formData.append('file', blob, 'image.jpg')
65+
// ...
4666
}, 'image/jpeg')
4767
}
4868
```
@@ -51,70 +71,63 @@ if (canvas.toBlob) {
5171

5272
The JavaScript Canvas to Blob function has zero dependencies.
5373

54-
However, Canvas to Blob is a very suitable complement to the
74+
However, it is a very suitable complement to the
5575
[JavaScript Load Image](https://github.com/blueimp/JavaScript-Load-Image)
5676
function.
5777

58-
## API
59-
60-
In addition to the `canvas.toBlob` polyfill, the JavaScript Canvas to Blob
61-
script provides one additional function called `dataURLtoBlob`, which is added
62-
to the global window object, unless the library is loaded via a module loader
63-
like RequireJS, Browserify or webpack:
64-
65-
```js
66-
// 80x60px GIF image (color black, base64 data):
67-
var b64Data =
68-
'R0lGODdhUAA8AIABAAAAAP///ywAAAAAUAA8AAACS4SPqcvtD6' +
69-
'OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofE' +
70-
'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7',
71-
imageUrl = 'data:image/gif;base64,' + b64Data,
72-
blob = window.dataURLtoBlob && window.dataURLtoBlob(imageUrl)
73-
```
74-
75-
E.g. Via Npm/Browserify:
76-
77-
```shell
78-
npm i blueimp-canvas-to-blob
79-
```
80-
81-
Requiring loads the dataURLtoBlob function.
82-
83-
```js
84-
var dataURLtoBlob = require('blueimp-canvas-to-blob')
85-
86-
// 80x60px GIF image (color black, base64 data):
87-
var b64Data =
88-
'R0lGODdhUAA8AIABAAAAAP///ywAAAAAUAA8AAACS4SPqcvtD6' +
89-
'OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofE' +
90-
'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7',
91-
imageUrl = 'data:image/gif;base64,' + b64Data,
92-
blob = dataURLtoBlob(imageURL)
93-
```
94-
9578
## Browsers
9679

97-
The following browsers support either the native or the polyfill
98-
_canvas.toBlob()_ method:
80+
The following browsers have native support for
81+
[HTMLCanvasElement.toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob):
82+
83+
- Chrome 50+
84+
- Firefox 19+
85+
- Safari 11+
86+
- Mobile Chrome 50+ (Android)
87+
- Mobile Firefox 4+ (Android)
88+
- Mobile Safari 11+ (iOS)
89+
- Edge 79+
90+
91+
Browsers which implement the following APIs support `canvas.toBlob()` via
92+
polyfill:
93+
94+
- [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement)
95+
- [HTMLCanvasElement.toDataURL](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)
96+
- [Blob() constructor](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob)
97+
- [atob](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/atob)
98+
- [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
99+
- [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array)
100+
101+
This includes the following browsers:
102+
103+
- Chrome 20+
104+
- Firefox 13+
105+
- Safari 8+
106+
- Mobile Chrome 25+ (Android)
107+
- Mobile Firefox 14+ (Android)
108+
- Mobile Safari 8+ (iOS)
109+
- Edge 74+
110+
- Edge Legacy 12+
111+
- Internet Explorer 10+
99112

100-
### Desktop browsers
113+
## API
101114

102-
- Google Chrome (see
103-
[Chromium issue #67587](https://code.google.com/p/chromium/issues/detail?id=67587))
104-
- Apple Safari 6.0+ (see
105-
[Mozilla issue #648610](https://bugzilla.mozilla.org/show_bug.cgi?id=648610))
106-
- Mozilla Firefox 4.0+
107-
- Microsoft Internet Explorer 10.0+
115+
In addition to the `canvas.toBlob()` polyfill, the JavaScript Canvas to Blob
116+
script exposes its helper function `dataURLtoBlob(url)`:
108117

109-
### Mobile browsers
118+
```js
119+
// Uncomment the following line when using a module loader like webpack:
120+
// var dataURLtoBlob = require('blueimp-canvas-to-blob')
110121

111-
- Apple Safari Mobile on iOS 6.0+
112-
- Google Chrome on iOS 6.0+
113-
- Google Chrome on Android 4.0+
122+
// black+white 3x2 GIF, base64 data:
123+
var b64 = 'R0lGODdhAwACAPEAAAAAAP///yZFySZFySH5BAEAAAIALAAAAAADAAIAAAIDRAJZADs='
124+
var url = 'data:image/gif;base64,' + b64
125+
var blob = dataURLtoBlob(url)
126+
```
114127

115128
## Test
116129

117-
[JavaScript Canvas to Blob Test](https://blueimp.github.io/JavaScript-Canvas-to-Blob/test/)
130+
[Unit tests](https://blueimp.github.io/JavaScript-Canvas-to-Blob/test/)
118131

119132
## License
120133

0 commit comments

Comments
 (0)
Please sign in to comment.