maplibre-gl 3.3.1 → 3.4.1

package/src/util/offscreen_canvas_distorted.ts

@@ -0,0 +1,39 @@
+import {offscreenCanvasSupported} from './offscreen_canvas_supported';
+
+let offscreenCanvasDistorted: boolean;
+
+/**
+ * Some browsers don't return the exact pixels from a canvas to prevent user fingerprinting (see #3185).
+ * This function writes pixels to an OffscreenCanvas and reads them back using getImageData, returning false
+ * if they don't match.
+ *
+ * @returns true if the browser supports OffscreenCanvas but it distorts getImageData results, false otherwise.
+ */
+export function isOffscreenCanvasDistorted(): boolean {
+    if (offscreenCanvasDistorted == null) {
+        offscreenCanvasDistorted = false;
+        if (offscreenCanvasSupported()) {
+            const size = 5;
+            const canvas = new OffscreenCanvas(size, size);
+            const context = canvas.getContext('2d', {willReadFrequently: true});
+            if (context) {
+                // fill each pixel with an RGB value that should make the byte at index i equal to i (except alpha channel):
+                // [0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 10, 255, ...]
+                for (let i = 0; i < size * size; i++) {
+                    const base = i * 4;
+                    context.fillStyle = `rgb(${base},${base + 1},${base + 2})`;
+                    context.fillRect(i % size, Math.floor(i / size), 1, 1);
+                }
+                const data = context.getImageData(0, 0, size, size).data;
+                for (let i = 0; i < size * size * 4; i++) {
+                    if (i % 4 !== 3 && data[i] !== i) {
+                        offscreenCanvasDistorted = true;
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    return offscreenCanvasDistorted || false;
+}

package/src/util/test/util.ts

@@ -132,3 +132,15 @@ export function stubAjaxGetImage(createImageBitmap) {
         }
     });
 }
+
+/**
+ * This should be used in test that use nise since the internal buffer returned from a file is not an instance of ArrayBuffer for some reason.
+ * @param data - the data read from a file, for example by `fs.readFileSync(...)`
+ * @returns a copy of the data in the file in `ArrayBuffer` format
+ */
+export function bufferToArrayBuffer(data: Buffer): ArrayBuffer {
+    const newBuffer = new ArrayBuffer(data.buffer.byteLength);
+    const view = new Uint8Array(newBuffer);
+    data.copy(view);
+    return view.buffer;
+}

package/src/util/util.test.ts

@@ -1,5 +1,6 @@
 import Point from '@mapbox/point-geometry';
-import {arraysIntersect, asyncAll, bezier, clamp, clone, deepEqual, easeCubicInOut, extend, filterObject, findLineIntersection, isClosedPolygon, isCounterClockwise, isPowerOfTwo, keysDifference, mapObject, nextPowerOfTwo, parseCacheControl, pick, uniqueId, wrap} from './util';
+import {arraysIntersect, asyncAll, bezier, clamp, clone, deepEqual, easeCubicInOut, extend, filterObject, findLineIntersection, isClosedPolygon, isCounterClockwise, isPowerOfTwo, keysDifference, mapObject, nextPowerOfTwo, parseCacheControl, pick, readImageDataUsingOffscreenCanvas, readImageUsingVideoFrame, uniqueId, wrap} from './util';
+import {Canvas} from 'canvas';
 
 describe('util', () => {
     expect(easeCubicInOut(0)).toBe(0);
@@ -346,3 +347,172 @@ describe('util findLineIntersection', () => {
         expect(intersection).toBeNull();
     });
 });
+
+describe('util readImageUsingVideoFrame', () => {
+    let format = 'RGBA';
+    const frame = {
+        get format() {
+            return format;
+        },
+        copyTo: jest.fn(buf => {
+            buf.set(new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]).subarray(0, buf.length));
+            return Promise.resolve();
+        }),
+        close: jest.fn(),
+    };
+    (window as any).VideoFrame = jest.fn(() => frame);
+    const canvas = document.createElement('canvas');
+    canvas.width = canvas.height = 2;
+
+    beforeEach(() => {
+        format = 'RGBA';
+        frame.copyTo.mockClear();
+        frame.close.mockReset();
+    });
+
+    test('copy RGB', async () => {
+        format = 'RGBA';
+        const result = await readImageUsingVideoFrame(canvas, 0, 0, 2, 2);
+        expect(result).toHaveLength(4 * 4);
+        expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+            layout: [{offset: 0, stride: 8}],
+            rect: {x: 0, y: 0, width: 2, height: 2}
+        });
+        expect(result).toEqual(new Uint8ClampedArray([
+            1, 2, 3, 4, 5, 6, 7, 8,
+            9, 10, 11, 12, 13, 14, 15, 16
+        ]));
+        expect(frame.close).toHaveBeenCalledTimes(1);
+    });
+
+    test('flip BRG', async () => {
+        format = 'BGRX';
+        const result = await readImageUsingVideoFrame(canvas, 0, 0, 2, 2);
+        expect(result).toEqual(new Uint8ClampedArray([
+            3, 2, 1, 4, 7, 6, 5, 8,
+            11, 10, 9, 12, 15, 14, 13, 16
+        ]));
+        expect(frame.close).toHaveBeenCalledTimes(1);
+    });
+
+    test('ignore bad format', async () => {
+        format = 'OTHER';
+        await expect(readImageUsingVideoFrame(canvas, 0, 0, 2, 2)).rejects.toThrow();
+        expect(frame.close).toHaveBeenCalledTimes(1);
+    });
+
+    describe('layout/rect', () => {
+        beforeEach(() => {
+            (window as any).VideoFrame = jest.fn(() => frame);
+            canvas.width = canvas.height = 3;
+        });
+
+        test('full rectangle', async () => {
+            await readImageUsingVideoFrame(canvas, 0, 0, 3, 3);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 12}],
+                rect: {x: 0, y: 0, width: 3, height: 3}
+            });
+        });
+
+        test('top left', async () => {
+            await readImageUsingVideoFrame(canvas, 0, 0, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 8}],
+                rect: {x: 0, y: 0, width: 2, height: 2}
+            });
+        });
+
+        test('top right', async () => {
+            await readImageUsingVideoFrame(canvas, 1, 0, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 8}],
+                rect: {x: 1, y: 0, width: 2, height: 2}
+            });
+        });
+
+        test('bottom left', async () => {
+            await readImageUsingVideoFrame(canvas, 0, 1, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 8}],
+                rect: {x: 0, y: 1, width: 2, height: 2}
+            });
+        });
+
+        test('bottom right', async () => {
+            await readImageUsingVideoFrame(canvas, 1, 1, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 8}],
+                rect: {x: 1, y: 1, width: 2, height: 2}
+            });
+        });
+
+        test('middle', async () => {
+            await readImageUsingVideoFrame(canvas, 1, 1, 1, 1);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 4}],
+                rect: {x: 1, y: 1, width: 1, height: 1}
+            });
+        });
+
+        test('extend past on all sides', async () => {
+            await readImageUsingVideoFrame(canvas, -1, -1, 5, 5);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 4 * 5 + 4, stride: 4 * 5}],
+                rect: {x: 0, y: 0, width: 3, height: 3}
+            });
+        });
+
+        test('overhang top left', async () => {
+            await readImageUsingVideoFrame(canvas, -1, -1, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 4 * 2 + 4, stride: 4 * 2}],
+                rect: {x: 0, y: 0, width: 1, height: 1}
+            });
+        });
+
+        test('overhang top right', async () => {
+            await readImageUsingVideoFrame(canvas, 2, -1, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 4 * 2, stride: 4 * 2}],
+                rect: {x: 2, y: 0, width: 1, height: 1}
+            });
+        });
+
+        test('overhang bottom left', async () => {
+            await readImageUsingVideoFrame(canvas, -1, 2, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 4, stride: 4 * 2}],
+                rect: {x: 0, y: 2, width: 1, height: 1}
+            });
+        });
+
+        test('overhang bottom right', async () => {
+            await readImageUsingVideoFrame(canvas, 2, 2, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 4 * 2}],
+                rect: {x: 2, y: 2, width: 1, height: 1}
+            });
+        });
+    });
+});
+
+describe('util readImageDataUsingOffscreenCanvas', () => {
+    test('reads pixels from image', async () => {
+        (window as any).OffscreenCanvas = Canvas;
+        const image = new Canvas(2, 2);
+        const context = image.getContext('2d');
+        context.fillStyle = 'rgb(10,0,0)';
+        context.fillRect(0, 0, 1, 1);
+        context.fillStyle = 'rgb(0,20,0)';
+        context.fillRect(1, 0, 1, 1);
+        context.fillStyle = 'rgb(0,0,30)';
+        context.fillRect(0, 1, 1, 1);
+        context.fillStyle = 'rgb(40,40,40)';
+        context.fillRect(1, 1, 1, 1);
+        expect([...await readImageDataUsingOffscreenCanvas(image as any, 0, 0, 2, 2)]).toEqual([
+            10, 0, 0, 255, 0, 20, 0, 255,
+            0, 0, 30, 255, 40, 40, 40, 255,
+        ]);
+    });
+});

package/src/util/util.ts

@@ -1,6 +1,8 @@
 import Point from '@mapbox/point-geometry';
 import UnitBezier from '@mapbox/unitbezier';
 import type {Callback} from '../types/callback';
+import {isOffscreenCanvasDistorted} from './offscreen_canvas_distorted';
+import type {Size} from './image';
 
 /**
  * Given a value `t` that varies between 0 and 1, return
@@ -517,3 +519,151 @@ export function arrayBufferToImage(data: ArrayBuffer, callback: (err?: Error | n
     const blob: Blob = new Blob([new Uint8Array(data)], {type: 'image/png'});
     img.src = data.byteLength ? URL.createObjectURL(blob) : transparentPngUrl;
 }
+
+/**
+ * Computes the webcodecs VideoFrame API options to select a rectangle out of
+ * an image and write it into the destination rectangle.
+ *
+ * Rect (x/y/width/height) select the overlapping rectangle from the source image
+ * and layout (offset/stride) write that overlapping rectangle to the correct place
+ * in the destination image.
+ *
+ * Offset is the byte offset in the dest image that the first pixel appears at
+ * and stride is the number of bytes to the start of the next row:
+ * ┌───────────┐
+ * │  dest     │
+ * │       ┌───┼───────┐
+ * │offset→│▓▓▓│ source│
+ * │       │▓▓▓│       │
+ * │       └───┼───────┘
+ * │stride ⇠╌╌╌│
+ * │╌╌╌╌╌╌→    │
+ * └───────────┘
+ *
+ * @param image - source image containing a width and height attribute
+ * @param x - top-left x coordinate to read from the image
+ * @param y - top-left y coordinate to read from the image
+ * @param width - width of the rectangle to read from the image
+ * @param height - height of the rectangle to read from the image
+ * @returns the layout and rect options to pass into VideoFrame API
+ */
+function computeVideoFrameParameters(image: Size, x: number, y: number, width: number, height: number): VideoFrameCopyToOptions {
+    const destRowOffset = Math.max(-x, 0) * 4;
+    const firstSourceRow = Math.max(0, y);
+    const firstDestRow = firstSourceRow - y;
+    const offset = firstDestRow * width * 4 + destRowOffset;
+    const stride = width * 4;
+
+    const sourceLeft = Math.max(0, x);
+    const sourceTop = Math.max(0, y);
+    const sourceRight = Math.min(image.width, x + width);
+    const sourceBottom = Math.min(image.height, y + height);
+    return {
+        rect: {
+            x: sourceLeft,
+            y: sourceTop,
+            width: sourceRight - sourceLeft,
+            height: sourceBottom - sourceTop
+        },
+        layout: [{offset, stride}]
+    };
+}
+
+/**
+ * Reads pixels from an ImageBitmap/Image/canvas using webcodec VideoFrame API.
+ *
+ * @param data - image, imagebitmap, or canvas to parse
+ * @param x - top-left x coordinate to read from the image
+ * @param y - top-left y coordinate to read from the image
+ * @param width - width of the rectangle to read from the image
+ * @param height - height of the rectangle to read from the image
+ * @returns a promise containing the parsed RGBA pixel values of the image, or the error if an error occurred
+ */
+export async function readImageUsingVideoFrame(
+    image: HTMLImageElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas,
+    x: number, y: number, width: number, height: number
+): Promise<Uint8ClampedArray> {
+    if (typeof VideoFrame === 'undefined') {
+        throw new Error('VideoFrame not supported');
+    }
+    const frame = new VideoFrame(image, {timestamp: 0});
+    try {
+        const format = frame?.format;
+        if (!format || !(format.startsWith('BGR') || format.startsWith('RGB'))) {
+            throw new Error(`Unrecognized format ${format}`);
+        }
+        const swapBR = format.startsWith('BGR');
+        const result = new Uint8ClampedArray(width * height * 4);
+        await frame.copyTo(result, computeVideoFrameParameters(image, x, y, width, height));
+        if (swapBR) {
+            for (let i = 0; i < result.length; i += 4) {
+                const tmp = result[i];
+                result[i] = result[i + 2];
+                result[i + 2] = tmp;
+            }
+        }
+        return result;
+    } finally {
+        frame.close();
+    }
+}
+
+let offscreenCanvas: OffscreenCanvas;
+let offscreenCanvasContext: OffscreenCanvasRenderingContext2D;
+
+/**
+ * Reads pixels from an ImageBitmap/Image/canvas using OffscreenCanvas
+ *
+ * @param data - image, imagebitmap, or canvas to parse
+ * @param x - top-left x coordinate to read from the image
+ * @param y - top-left y coordinate to read from the image
+ * @param width - width of the rectangle to read from the image
+ * @param height - height of the rectangle to read from the image
+ * @returns a promise containing the parsed RGBA pixel values of the image, or the error if an error occurred
+ */
+export function readImageDataUsingOffscreenCanvas(
+    imgBitmap: HTMLImageElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas,
+    x: number, y: number, width: number, height: number
+): Uint8ClampedArray {
+    const origWidth = imgBitmap.width;
+    const origHeight = imgBitmap.height;
+    // Lazily initialize OffscreenCanvas
+    if (!offscreenCanvas || !offscreenCanvasContext) {
+        // Dem tiles are typically 256x256
+        offscreenCanvas = new OffscreenCanvas(origWidth, origHeight);
+        offscreenCanvasContext = offscreenCanvas.getContext('2d', {willReadFrequently: true});
+    }
+
+    offscreenCanvas.width = origWidth;
+    offscreenCanvas.height = origHeight;
+
+    offscreenCanvasContext.drawImage(imgBitmap, 0, 0, origWidth, origHeight);
+    const imgData = offscreenCanvasContext.getImageData(x, y, width, height);
+    offscreenCanvasContext.clearRect(0, 0, origWidth, origHeight);
+    return imgData.data;
+}
+
+/**
+ * Reads RGBA pixels from an preferring OffscreenCanvas, but falling back to VideoFrame if supported and
+ * the browser is mangling OffscreenCanvas getImageData results.
+ *
+ * @param data - image, imagebitmap, or canvas to parse
+ * @param x - top-left x coordinate to read from the image
+ * @param y - top-left y coordinate to read from the image
+ * @param width - width of the rectangle to read from the image
+ * @param height - height of the rectangle to read from the image
+ * @returns a promise containing the parsed RGBA pixel values of the image
+ */
+export async function getImageData(
+    image: HTMLImageElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas,
+    x: number, y: number, width: number, height: number
+): Promise<Uint8ClampedArray> {
+    if (isOffscreenCanvasDistorted()) {
+        try {
+            return await readImageUsingVideoFrame(image, x, y, width, height);
+        } catch (e) {
+            // fall back to OffscreenCanvas
+        }
+    }
+    return readImageDataUsingOffscreenCanvas(image, x, y, width, height);
+}