Use createImageBitmap when supported (maplibre#650)

longxiutmm · Nov 23, 2021 · c0f06f2 · c0f06f2
1 parent 9d1381c
commit c0f06f2
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -33,6 +33,7 @@
 - Added `redraw` function to map (#206)
 - Improve attribution controls accessibility. See [#359](https://github.com/maplibre/maplibre-gl-js/issues/359)
 - Allow maxPitch value up to 85, use values greater than 60 at your own risk (#574)
+- `getImage` uses createImageBitmap when supported (#650)
 - *...Add new stuff here...*
 
 ### 🐞 Bug fixes

diff --git a/src/util/ajax.ts b/src/util/ajax.ts
@@ -3,7 +3,6 @@ import config from './config';
 import assert from 'assert';
 import {cacheGet, cachePut} from './tile_request_cache';
 import webpSupported from './webp_supported';
-import offscreenCanvasSupported from './offscreen_canvas_supported';
 
 import type {Callback} from '../types/callback';
 import type {Cancelable} from '../types/cancelable';
@@ -323,6 +322,15 @@ function arrayBufferToImageBitmap(data: ArrayBuffer, callback: (err?: Error | nu
     });
 }
 
+function arrayBufferToCanvasImageSource(data: ArrayBuffer, callback: (err?: Error | null, image?: CanvasImageSource | null) => void, cacheControl?: string | null, expires?: string | null) {
+    const imageBitmapSupported = typeof createImageBitmap === 'function';
+    if (imageBitmapSupported) {
+        arrayBufferToImageBitmap(data, callback);
+    } else {
+        arrayBufferToImage(data, callback, cacheControl, expires);
+    }
+}
+
 let imageQueue, numImageRequests;
 export const resetImageRequestQueue = () => {
     imageQueue = [];
@@ -378,11 +386,7 @@ export const getImage = function(
         if (err) {
             callback(err);
         } else if (data) {
-            if (offscreenCanvasSupported()) {
-                arrayBufferToImageBitmap(data, callback);
-            } else {
-                arrayBufferToImage(data, callback, cacheControl, expires);
-            }
+            arrayBufferToCanvasImageSource(data, callback, cacheControl, expires);
         }
     });
 

diff --git a/test/unit/util/ajax.test.js b/test/unit/util/ajax.test.js
@@ -172,5 +172,40 @@ test('ajax', (t) => {
         window.server.respond();
     });
 
+
+    t.test('getImage uses ImageBitmap when supported', (t) => {
+        resetImageRequestQueue();
+
+        window.server.respondWith(request => request.respond(200, {'Content-Type': 'image/png'}, ''));
+
+        // mock createImageBitmap support
+        global.createImageBitmap = () => Promise.resolve(new ImageBitmap());
+
+        getImage({url: ''}, (err, img) => {
+            if (err) t.fail();
+            t.ok(img instanceof ImageBitmap);
+            t.end();
+        });
+
+        window.server.respond();
+    });
+
+    t.test('getImage uses HTMLImageElement when ImageBitmap is not supported', (t) => {
+        resetImageRequestQueue();
+
+        window.server.respondWith(request => request.respond(200, {'Content-Type': 'image/png'}, ''));
+
+        // mock createImageBitmap not supported
+        global.createImageBitmap = undefined;
+
+        getImage({url: ''}, (err, img) => {
+            if (err) t.fail();
+            t.ok(img instanceof HTMLImageElement);
+            t.end();
+        });
+
+        window.server.respond();
+    });
+
     t.end();
 });