From 27496941a070a67d2ef1311b3a3a93c92b5cf471 Mon Sep 17 00:00:00 2001 From: Pierre Ossman Date: Fri, 4 Dec 2020 16:51:22 +0100 Subject: [PATCH] Remove createImageData() fallback All our browsers should be new enough now that we can rely on the ImageData constructor. --- core/display.js | 14 +------------- core/util/browser.js | 9 --------- core/util/cursor.js | 9 +-------- tests/test.display.js | 23 +++++++++++------------ 4 files changed, 13 insertions(+), 42 deletions(-) diff --git a/core/display.js b/core/display.js index 01b1100b..701eba4a 100644 --- a/core/display.js +++ b/core/display.js @@ -8,7 +8,6 @@ import * as Log from './util/logging.js'; import Base64 from "./base64.js"; -import { supportsImageMetadata } from './util/browser.js'; import { toSigned32bit } from './util/int.js'; export default class Display { @@ -56,11 +55,6 @@ export default class Display { Log.Debug("User Agent: " + navigator.userAgent); - // Check canvas features - if (!('createImageData' in this._drawCtx)) { - throw new Error("Canvas does not support createImageData"); - } - Log.Debug("<< Display.constructor"); // ===== PROPERTIES ===== @@ -393,13 +387,7 @@ export default class Display { let data = new Uint8ClampedArray(arr.buffer, arr.byteOffset + offset, width * height * 4); - let img; - if (supportsImageMetadata) { - img = new ImageData(data, width, height); - } else { - img = this._drawCtx.createImageData(width, height); - img.data.set(data); - } + let img = new ImageData(data, width, height); this._drawCtx.putImageData(img, x, y); this._damage(x, y, width, height); } diff --git a/core/util/browser.js b/core/util/browser.js index c8873c45..24b5e960 100644 --- a/core/util/browser.js +++ b/core/util/browser.js @@ -45,15 +45,6 @@ try { export const supportsCursorURIs = _supportsCursorURIs; -let _supportsImageMetadata = false; -try { - new ImageData(new Uint8ClampedArray(4), 1, 1); - _supportsImageMetadata = true; -} catch (ex) { - // ignore failure -} -export const supportsImageMetadata = _supportsImageMetadata; - let _hasScrollbarGutter = true; try { // Create invisible container diff --git a/core/util/cursor.js b/core/util/cursor.js index 1786ed90..12bcceda 100644 --- a/core/util/cursor.js +++ b/core/util/cursor.js @@ -87,14 +87,7 @@ export default class Cursor { this._canvas.width = w; this._canvas.height = h; - let img; - try { - // IE doesn't support this - img = new ImageData(new Uint8ClampedArray(rgba), w, h); - } catch (ex) { - img = ctx.createImageData(w, h); - img.data.set(new Uint8ClampedArray(rgba)); - } + let img = new ImageData(new Uint8ClampedArray(rgba), w, h); ctx.clearRect(0, 0, w, h); ctx.putImageData(img, 0, 0); diff --git a/tests/test.display.js b/tests/test.display.js index c2ccdd8b..0604997c 100644 --- a/tests/test.display.js +++ b/tests/test.display.js @@ -4,28 +4,27 @@ import Base64 from '../core/base64.js'; import Display from '../core/display.js'; describe('Display/Canvas Helper', function () { - const checkedData = new Uint8Array([ + const checkedData = new Uint8ClampedArray([ 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255 ]); - const basicData = new Uint8Array([0xff, 0x00, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0xff, 0xff, 0xff, 255]); + const basicData = new Uint8ClampedArray([0xff, 0x00, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0xff, 0xff, 0xff, 255]); - function makeImageCanvas(inputData) { + function makeImageCanvas(inputData, width, height) { const canvas = document.createElement('canvas'); - canvas.width = 4; - canvas.height = 4; + canvas.width = width; + canvas.height = height; const ctx = canvas.getContext('2d'); - const data = ctx.createImageData(4, 4); - for (let i = 0; i < checkedData.length; i++) { data.data[i] = inputData[i]; } + const data = new ImageData(inputData, width, height); ctx.putImageData(data, 0, 0); return canvas; } - function makeImagePng(inputData) { - const canvas = makeImageCanvas(inputData); + function makeImagePng(inputData, width, height) { + const canvas = makeImageCanvas(inputData, width, height); const url = canvas.toDataURL(); const data = url.split(",")[1]; return Base64.decode(data); @@ -44,7 +43,7 @@ describe('Display/Canvas Helper', function () { it('should take viewport location into consideration when drawing images', function () { display.resize(4, 4); display.viewportChangeSize(2, 2); - display.drawImage(makeImageCanvas(basicData), 1, 1); + display.drawImage(makeImageCanvas(basicData, 4, 1), 1, 1); display.flip(); const expected = new Uint8Array(16); @@ -300,7 +299,7 @@ describe('Display/Canvas Helper', function () { }); it('should support drawing images via #imageRect', function (done) { - display.imageRect(0, 0, 4, 4, "image/png", makeImagePng(checkedData)); + display.imageRect(0, 0, 4, 4, "image/png", makeImagePng(checkedData, 4, 4)); display.flip(); display.onflush = () => { expect(display).to.have.displayed(checkedData); @@ -316,7 +315,7 @@ describe('Display/Canvas Helper', function () { }); it('should support drawing an image object via #drawImage', function () { - const img = makeImageCanvas(checkedData); + const img = makeImageCanvas(checkedData, 4, 4); display.drawImage(img, 0, 0); display.flip(); expect(display).to.have.displayed(checkedData);