ImageBitmap and OffscreenCanvas for DEM tiles

src/source/raster_dem_tile_source.js

@@ -54,7 +54,8 @@ class RasterDEMTileSource extends RasterTileSource implements Source {
                 if (this.map._refreshExpiredTiles) tile.setExpiryData(img);
                 delete (img: any).cacheControl;
                 delete (img: any).expires;
-                const rawImageData = browser.getImageData(img, 1);
+                const transfer = window.ImageBitmap && img instanceof window.ImageBitmap && browser.supportsOffscreenCanvas();
+                const rawImageData = transfer ? img : browser.getImageData(img, 1);
                 const params = {
                     uid: tile.uid,
                     coord: tile.tileID,

src/source/raster_dem_tile_worker_source.js

@@ -12,14 +12,25 @@ import type {
 class RasterDEMTileWorkerSource {
     actor: Actor;
     loaded: {[string]: DEMData};
+    offcreenCanvas: ?OffscreenCanvas;
 
     constructor() {
         this.loaded = {};
+        this.offcreenCanvas = new OffscreenCanvas(512, 512);
+        this.offcreenCanvasContext = this.offcreenCanvas.getContext('2d');
     }
 
     loadTile(params: WorkerDEMTileParameters, callback: WorkerDEMTileCallback) {
         const {uid, encoding, rawImageData} = params;
-        const dem = new DEMData(uid, rawImageData, encoding);
+        let imagePixels = rawImageData;
+        if (rawImageData instanceof ImageBitmap) {
+            this.offcreenCanvas.width = rawImageData.width;
+            this.offcreenCanvas.height = rawImageData.height;
+            this.offcreenCanvasContext.drawImage(rawImageData, 0, 0, rawImageData.width, rawImageData.height);
+            imagePixels = this.offcreenCanvasContext.getImageData(-1, -1, rawImageData.width + 2, rawImageData.height + 2);
+        }
+
+        const dem = new DEMData(uid, imagePixels, encoding);
 
         this.loaded = this.loaded || {};
         this.loaded[uid] = dem;

src/util/ajax.js

@@ -29,6 +29,8 @@ const ResourceType = {
 };
 export {ResourceType};
 
+const supportsImageBitmap = typeof window.createImageBitmap == 'function';
+
 if (typeof Object.freeze == 'function') {
     Object.freeze(ResourceType);
 }
@@ -257,14 +259,38 @@ function sameOrigin(url) {
 
 const transparentPngUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=';
 
+function arrayBufferToImage(data: ArrayBuffer, callback: (err: ?Error, image: ?HTMLImageElement) => void, cacheControl: ?string, expires: ?string) {
+    const img: HTMLImageElement = new window.Image();
+    const URL = window.URL || window.webkitURL;
+    img.onload = () => {
+        callback(null, img);
+        URL.revokeObjectURL(img.src);
+    };
+    img.onerror = () => callback(new Error('Could not load image. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.'));
+    const blob: Blob = new window.Blob([new Uint8Array(data)], {type: 'image/png'});
+    (img: any).cacheControl = cacheControl;
+    (img: any).expires = expires;
+    img.src = data.byteLength ? URL.createObjectURL(blob) : transparentPngUrl;
+}
+
+function arrayBufferToImageBitmap(data: ArrayBuffer, callback: (err: ?Error, image: ?ImageBitmap) => void, cacheControl: ?string, expires: ?string) {
+    const blob: Blob = new window.Blob([new Uint8Array(data)], {type: 'image/png'});
+    window.createImageBitmap(blob).then((imgBitmap) => {
+        callback(null, imgBitmap);
+    }).catch((e) => {
+        console.log(e);
+        callback(new Error('Could not load image. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.'));
+    });
+}
+
 let imageQueue, numImageRequests;
 export const resetImageRequestQueue = () => {
     imageQueue = [];
     numImageRequests = 0;
 };
 resetImageRequestQueue();
 
-export const getImage = function(requestParameters: RequestParameters, callback: Callback<HTMLImageElement>): Cancelable {
+export const getImage = function(requestParameters: RequestParameters, callback: Callback<HTMLImageElement | ImageBitmap>): Cancelable {
     if (webpSupported.supported) {
         if (!requestParameters.headers) {
             requestParameters.headers = {};
@@ -309,16 +335,11 @@ export const getImage = function(requestParameters: RequestParameters, callback:
         if (err) {
             callback(err);
         } else if (data) {
-            const img: HTMLImageElement = new window.Image();
-            img.onload = () => {
-                callback(null, img);
-                window.URL.revokeObjectURL(img.src);
-            };
-            img.onerror = () => callback(new Error('Could not load image. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.'));
-            const blob: Blob = new window.Blob([new Uint8Array(data)], {type: 'image/png'});
-            (img: any).cacheControl = cacheControl;
-            (img: any).expires = expires;
-            img.src = data.byteLength ? window.URL.createObjectURL(blob) : transparentPngUrl;
+            if (supportsImageBitmap) {
+                arrayBufferToImageBitmap(data, callback, cacheControl, expires);
+            } else {
+                arrayBufferToImage(data, callback, cacheControl, expires);
+            }
         }
     });
 

src/util/browser.js

@@ -56,6 +56,10 @@ const exported = {
 
     hardwareConcurrency: window.navigator.hardwareConcurrency || 4,
 
+    supportsOffscreenCanvas(): boolean {
+        return !!window.OffscreenCanvas;
+    },
+
     get devicePixelRatio() { return window.devicePixelRatio; },
     get prefersReducedMotion(): boolean {
         if (!window.matchMedia) return false;

src/util/web_worker_transfer.js

@@ -133,7 +133,7 @@ export function serialize(input: mixed, transferables: ?Array<Transferable>): Se
         return input;
     }
 
-    if (isArrayBuffer(input)) {
+    if (isArrayBuffer(input) || window.ImageBitmap && input instanceof window.ImageBitmap) {
         if (transferables) {
             transferables.push(((input: any): ArrayBuffer));
         }
@@ -223,7 +223,12 @@ export function deserialize(input: Serialized): mixed {
         input instanceof String ||
         input instanceof Date ||
         input instanceof RegExp ||
+<<<<<<< HEAD
+        input instanceof ArrayBuffer ||
+        input instanceof ImageBitmap ||
+=======
         isArrayBuffer(input) ||
+>>>>>>> 8e8a28025dca26e258ad6a26c064d07596f11527
         ArrayBuffer.isView(input) ||
         input instanceof ImageData) {
         return input;