|
11 | 11 | - [Image loading](#image-loading)
|
12 | 12 | - [Image scaling](#image-scaling)
|
13 | 13 | - [Requirements](#requirements)
|
| 14 | +- [Browser support](#browser-support) |
14 | 15 | - [API](#api)
|
15 | 16 | - [Callback](#callback)
|
16 | 17 | - [Function signature](#function-signature)
|
@@ -187,6 +188,60 @@ following two
|
187 | 188 | [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
|
188 | 189 | based `loadImage` API in Browsers without native `Promise` support.
|
189 | 190 |
|
| 191 | +## Browser support |
| 192 | + |
| 193 | +Browsers which implement the following APIs support all options: |
| 194 | + |
| 195 | +- Loading images from File and Blob objects: |
| 196 | + - [URL.createObjectURL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) |
| 197 | + or |
| 198 | + [FileReader.readAsDataURL](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) |
| 199 | +- Parsing meta data: |
| 200 | + - [FileReader.readAsArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer) |
| 201 | + - [Blob.slice](https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice) |
| 202 | + - [DataView](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView) |
| 203 | + (no [BigInt](https://developer.mozilla.org/en-US/docs/Glossary/BigInt) |
| 204 | + support required) |
| 205 | +- Parsing meta data from images loaded via URL: |
| 206 | + - [fetch Response.blob](https://developer.mozilla.org/en-US/docs/Web/API/Body/blob) |
| 207 | + or |
| 208 | + [XMLHttpRequest.responseType blob](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType#blob) |
| 209 | +- Promise based API: |
| 210 | + - [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) |
| 211 | + |
| 212 | +This includes (but is not limited to) the following browsers: |
| 213 | + |
| 214 | +- Chrome 32+ |
| 215 | +- Firefox 29+ |
| 216 | +- Safari 8+ |
| 217 | +- Mobile Chrome 42+ (Android) |
| 218 | +- Mobile Firefox 50+ (Android) |
| 219 | +- Mobile Safari 8+ (iOS) |
| 220 | +- Edge 74+ |
| 221 | +- Edge Legacy 12+ |
| 222 | +- Internet Explorer 10+ `*` |
| 223 | + |
| 224 | +`*` Internet Explorer [requires](#requirements) a polyfill for the `Promise` |
| 225 | +based API. |
| 226 | + |
| 227 | +Loading an image from a URL and applying transformations (scaling, cropping and |
| 228 | +rotating - except `orientation:true`, which requires reading meta data) is |
| 229 | +supported by all browsers which implement the |
| 230 | +[HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) |
| 231 | +interface. |
| 232 | + |
| 233 | +Loading an image from a URL and scaling it in size is supported by all browsers |
| 234 | +which implement the |
| 235 | +[img](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) element and |
| 236 | +has been tested successfully with browser engines as old as Internet Explorer 5 |
| 237 | +(via |
| 238 | +[IE11's emulation mode](<https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/dn255001(v=vs.85)>)). |
| 239 | + |
| 240 | +The `loadImage()` function applies options using |
| 241 | +[progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement) |
| 242 | +and falls back to a configuration that is supported by the browser, e.g. if the |
| 243 | +`canvas` element is not supported, an equivalent `img` element is returned. |
| 244 | + |
190 | 245 | ## API
|
191 | 246 |
|
192 | 247 | ### Callback
|
|
0 commit comments