3
3
## Contents
4
4
5
5
- [ Description] ( #description )
6
+ - [ Setup] ( #setup )
6
7
- [ Usage] ( #usage )
7
8
- [ Requirements] ( #requirements )
8
- - [ API] ( #api )
9
9
- [ Browsers] ( #browsers )
10
- - [ Desktop browsers] ( #desktop-browsers )
11
- - [ Mobile browsers] ( #mobile-browsers )
10
+ - [ API] ( #api )
12
11
- [ Test] ( #test )
13
12
- [ License] ( #license )
14
13
15
14
## Description
16
15
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 )
19
20
method.
20
21
21
22
It can be used to create
22
23
[ 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.
24
26
25
- ## Usage
27
+ ## Setup
28
+
29
+ Install via [ NPM] ( https://www.npmjs.com/package/blueimp-canvas-to-blob ) :
26
30
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:
28
40
29
41
``` html
30
42
<script src =" js/canvas-to-blob.min.js" ></script >
31
43
```
32
44
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
34
54
implementation:
35
55
36
56
``` js
37
57
var canvas = document .createElement (' canvas' )
38
- /* ... your canvas manipulations ... */
58
+ // Edit the canvas ...
39
59
if (canvas .toBlob ) {
40
- canvas .toBlob (function (blob ) {
60
+ canvas .toBlob (function (blob ) {
41
61
// 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:
43
63
var formData = new FormData ()
44
- formData .append (' file' , blob, fileName )
45
- /* ... */
64
+ formData .append (' file' , blob, ' image.jpg ' )
65
+ // ...
46
66
}, ' image/jpeg' )
47
67
}
48
68
```
@@ -51,70 +71,63 @@ if (canvas.toBlob) {
51
71
52
72
The JavaScript Canvas to Blob function has zero dependencies.
53
73
54
- However, Canvas to Blob is a very suitable complement to the
74
+ However, it is a very suitable complement to the
55
75
[ JavaScript Load Image] ( https://github.com/blueimp/JavaScript-Load-Image )
56
76
function.
57
77
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
-
95
78
## Browsers
96
79
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+
99
112
100
- ### Desktop browsers
113
+ ## API
101
114
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) ` :
108
117
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')
110
121
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
+ ```
114
127
115
128
## Test
116
129
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/ )
118
131
119
132
## License
120
133
0 commit comments