From dd68fae081c8cf9850b485ddc594ba6d68eda504 Mon Sep 17 00:00:00 2001 From: Jeremy Rose Date: Tue, 26 Jul 2022 00:57:01 -0700 Subject: [PATCH] test: migrate nativeImage specs to main (#35062) * test: move nativeImage specs to main * simplify test --- docs/api/native-image.md | 22 +- .../api-native-image-spec.ts | 222 ++++++------------ 2 files changed, 88 insertions(+), 156 deletions(-) rename spec/api-native-image-spec.js => spec-main/api-native-image-spec.ts (76%) diff --git a/docs/api/native-image.md b/docs/api/native-image.md index a4d969d094e..0ad349bb081 100644 --- a/docs/api/native-image.md +++ b/docs/api/native-image.md @@ -149,7 +149,7 @@ console.log(image) * `options` Object * `width` Integer * `height` Integer - * `scaleFactor` Double (optional) - Defaults to 1.0. + * `scaleFactor` Number (optional) - Defaults to 1.0. Returns `NativeImage` @@ -162,7 +162,7 @@ pixel data returned by `toBitmap()`. The specific format is platform-dependent. * `options` Object (optional) * `width` Integer (optional) - Required for bitmap buffers. * `height` Integer (optional) - Required for bitmap buffers. - * `scaleFactor` Double (optional) - Defaults to 1.0. + * `scaleFactor` Number (optional) - Defaults to 1.0. Returns `NativeImage` @@ -225,7 +225,7 @@ The following methods are available on instances of the `NativeImage` class: #### `image.toPNG([options])` * `options` Object (optional) - * `scaleFactor` Double (optional) - Defaults to 1.0. + * `scaleFactor` Number (optional) - Defaults to 1.0. Returns `Buffer` - A [Buffer][buffer] that contains the image's `PNG` encoded data. @@ -238,7 +238,7 @@ Returns `Buffer` - A [Buffer][buffer] that contains the image's `JPEG` encoded d #### `image.toBitmap([options])` * `options` Object (optional) - * `scaleFactor` Double (optional) - Defaults to 1.0. + * `scaleFactor` Number (optional) - Defaults to 1.0. Returns `Buffer` - A [Buffer][buffer] that contains a copy of the image's raw bitmap pixel data. @@ -246,14 +246,14 @@ data. #### `image.toDataURL([options])` * `options` Object (optional) - * `scaleFactor` Double (optional) - Defaults to 1.0. + * `scaleFactor` Number (optional) - Defaults to 1.0. Returns `string` - The data URL of the image. #### `image.getBitmap([options])` * `options` Object (optional) - * `scaleFactor` Double (optional) - Defaults to 1.0. + * `scaleFactor` Number (optional) - Defaults to 1.0. Returns `Buffer` - A [Buffer][buffer] that contains the image's raw bitmap pixel data. @@ -276,7 +276,7 @@ Returns `boolean` - Whether the image is empty. #### `image.getSize([scaleFactor])` -* `scaleFactor` Double (optional) - Defaults to 1.0. +* `scaleFactor` Number (optional) - Defaults to 1.0. Returns [`Size`](structures/size.md). @@ -317,20 +317,20 @@ will be preserved in the resized image. #### `image.getAspectRatio([scaleFactor])` -* `scaleFactor` Double (optional) - Defaults to 1.0. +* `scaleFactor` Number (optional) - Defaults to 1.0. -Returns `Float` - The image's aspect ratio. +Returns `Number` - The image's aspect ratio. If `scaleFactor` is passed, this will return the aspect ratio corresponding to the image representation most closely matching the passed value. #### `image.getScaleFactors()` -Returns `Float[]` - An array of all scale factors corresponding to representations for a given nativeImage. +Returns `Number[]` - An array of all scale factors corresponding to representations for a given nativeImage. #### `image.addRepresentation(options)` * `options` Object - * `scaleFactor` Double - The scale factor to add the image representation for. + * `scaleFactor` Number (optional) - The scale factor to add the image representation for. * `width` Integer (optional) - Defaults to 0. Required if a bitmap buffer is specified as `buffer`. * `height` Integer (optional) - Defaults to 0. Required if a bitmap buffer diff --git a/spec/api-native-image-spec.js b/spec-main/api-native-image-spec.ts similarity index 76% rename from spec/api-native-image-spec.js rename to spec-main/api-native-image-spec.ts index 715655f15fd..57b09ec8f6e 100644 --- a/spec/api-native-image-spec.js +++ b/spec-main/api-native-image-spec.ts @@ -1,119 +1,53 @@ -'use strict'; - -const { expect } = require('chai'); -const { nativeImage } = require('electron'); -const { ifdescribe, ifit } = require('./spec-helpers'); -const path = require('path'); +import { expect } from 'chai'; +import { nativeImage } from 'electron/common'; +import { ifdescribe, ifit } from './spec-helpers'; +import * as path from 'path'; describe('nativeImage module', () => { - const ImageFormat = { - PNG: 'png', - JPEG: 'jpeg' + const fixturesPath = path.join(__dirname, '..', 'spec', 'fixtures'); + + const imageLogo = { + path: path.join(fixturesPath, 'assets', 'logo.png'), + width: 538, + height: 190 + }; + const image1x1 = { + dataUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYlWNgAAIAAAUAAdafFs0AAAAASUVORK5CYII=', + path: path.join(fixturesPath, 'assets', '1x1.png'), + height: 1, + width: 1 + }; + const image2x2 = { + dataUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFklEQVQYlWP8//8/AwMDEwMDAwMDAwAkBgMBBMzldwAAAABJRU5ErkJggg==', + path: path.join(fixturesPath, 'assets', '2x2.jpg'), + height: 2, + width: 2 + }; + const image3x3 = { + dataUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAADElEQVQYlWNgIAoAAAAnAAGZWEMnAAAAAElFTkSuQmCC', + path: path.join(fixturesPath, 'assets', '3x3.png'), + height: 3, + width: 3 }; - const images = [ - { - filename: 'logo.png', - format: ImageFormat.PNG, - hasAlphaChannel: true, - hasDataUrl: false, - width: 538, - height: 190 - }, - { - dataUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYlWNgAAIAAAUAAdafFs0AAAAASUVORK5CYII=', - filename: '1x1.png', - format: ImageFormat.PNG, - hasAlphaChannel: true, - hasDataUrl: true, - height: 1, - width: 1 - }, - { - dataUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFklEQVQYlWP8//8/AwMDEwMDAwMDAwAkBgMBBMzldwAAAABJRU5ErkJggg==', - filename: '2x2.jpg', - format: ImageFormat.JPEG, - hasAlphaChannel: false, - hasDataUrl: true, - height: 2, - width: 2 - }, - { - dataUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAADElEQVQYlWNgIAoAAAAnAAGZWEMnAAAAAElFTkSuQmCC', - filename: '3x3.png', - format: ImageFormat.PNG, - hasAlphaChannel: true, - hasDataUrl: true, - height: 3, - width: 3 - } + const dataUrlImages = [ + image1x1, + image2x2, + image3x3 ]; - /** - * @param {?string} filename - * @returns {?string} Full path. - */ - const getImagePathFromFilename = (filename) => { - return (filename === null) ? null - : path.join(__dirname, 'fixtures', 'assets', filename); - }; - - /** - * @param {!Object} image - * @param {Object} filters - * @returns {boolean} - */ - const imageMatchesTheFilters = (image, filters = null) => { - if (filters === null) { - return true; - } - - return Object.entries(filters) - .every(([key, value]) => image[key] === value); - }; - - /** - * @param {!Object} filters - * @returns {!Array} A matching images list. - */ - const getImages = (filters) => { - const matchingImages = images - .filter(i => imageMatchesTheFilters(i, filters)); - - // Add `.path` property to every image. - matchingImages - .forEach(i => { i.path = getImagePathFromFilename(i.filename); }); - - return matchingImages; - }; - - /** - * @param {!Object} filters - * @returns {Object} A matching image if any. - */ - const getImage = (filters) => { - const matchingImages = getImages(filters); - - let matchingImage = null; - if (matchingImages.length > 0) { - matchingImage = matchingImages[0]; - } - - return matchingImage; - }; - ifdescribe(process.platform === 'darwin')('isMacTemplateImage state', () => { describe('with properties', () => { it('correctly recognizes a template image', () => { - const image = nativeImage.createFromPath(path.join(__dirname, 'fixtures', 'assets', 'logo.png')); + const image = nativeImage.createFromPath(path.join(fixturesPath, 'assets', 'logo.png')); expect(image.isMacTemplateImage).to.be.false(); - const templateImage = nativeImage.createFromPath(path.join(__dirname, 'fixtures', 'assets', 'logo_Template.png')); + const templateImage = nativeImage.createFromPath(path.join(fixturesPath, 'assets', 'logo_Template.png')); expect(templateImage.isMacTemplateImage).to.be.true(); }); it('sets a template image', function () { - const image = nativeImage.createFromPath(path.join(__dirname, 'fixtures', 'assets', 'logo.png')); + const image = nativeImage.createFromPath(path.join(fixturesPath, 'assets', 'logo.png')); expect(image.isMacTemplateImage).to.be.false(); image.isMacTemplateImage = true; @@ -123,15 +57,15 @@ describe('nativeImage module', () => { describe('with functions', () => { it('correctly recognizes a template image', () => { - const image = nativeImage.createFromPath(path.join(__dirname, 'fixtures', 'assets', 'logo.png')); + const image = nativeImage.createFromPath(path.join(fixturesPath, 'assets', 'logo.png')); expect(image.isTemplateImage()).to.be.false(); - const templateImage = nativeImage.createFromPath(path.join(__dirname, 'fixtures', 'assets', 'logo_Template.png')); + const templateImage = nativeImage.createFromPath(path.join(fixturesPath, 'assets', 'logo_Template.png')); expect(templateImage.isTemplateImage()).to.be.true(); }); it('sets a template image', function () { - const image = nativeImage.createFromPath(path.join(__dirname, 'fixtures', 'assets', 'logo.png')); + const image = nativeImage.createFromPath(path.join(fixturesPath, 'assets', 'logo.png')); expect(image.isTemplateImage()).to.be.false(); image.setTemplateImage(true); @@ -168,7 +102,7 @@ describe('nativeImage module', () => { }); it('returns an image created from the given buffer', () => { - const imageA = nativeImage.createFromPath(path.join(__dirname, 'fixtures', 'assets', 'logo.png')); + const imageA = nativeImage.createFromPath(path.join(fixturesPath, 'assets', 'logo.png')); const imageB = nativeImage.createFromBitmap(imageA.toBitmap(), imageA.getSize()); expect(imageB.getSize()).to.deep.equal({ width: 538, height: 190 }); @@ -178,10 +112,10 @@ describe('nativeImage module', () => { }); it('throws on invalid arguments', () => { - expect(() => nativeImage.createFromBitmap(null, {})).to.throw('buffer must be a node Buffer'); - expect(() => nativeImage.createFromBitmap([12, 14, 124, 12], {})).to.throw('buffer must be a node Buffer'); - expect(() => nativeImage.createFromBitmap(Buffer.from([]), {})).to.throw('width is required'); - expect(() => nativeImage.createFromBitmap(Buffer.from([]), { width: 1 })).to.throw('height is required'); + expect(() => nativeImage.createFromBitmap(null as any, {} as any)).to.throw('buffer must be a node Buffer'); + expect(() => nativeImage.createFromBitmap([12, 14, 124, 12] as any, {} as any)).to.throw('buffer must be a node Buffer'); + expect(() => nativeImage.createFromBitmap(Buffer.from([]), {} as any)).to.throw('width is required'); + expect(() => nativeImage.createFromBitmap(Buffer.from([]), { width: 1 } as any)).to.throw('height is required'); expect(() => nativeImage.createFromBitmap(Buffer.from([]), { width: 1, height: 1 })).to.throw('invalid buffer size'); }); }); @@ -197,7 +131,7 @@ describe('nativeImage module', () => { }); it('returns an image created from the given buffer', () => { - const imageA = nativeImage.createFromPath(path.join(__dirname, 'fixtures', 'assets', 'logo.png')); + const imageA = nativeImage.createFromPath(path.join(fixturesPath, 'assets', 'logo.png')); const imageB = nativeImage.createFromBuffer(imageA.toPNG()); expect(imageB.getSize()).to.deep.equal({ width: 538, height: 190 }); @@ -231,8 +165,8 @@ describe('nativeImage module', () => { }); it('throws on invalid arguments', () => { - expect(() => nativeImage.createFromBuffer(null)).to.throw('buffer must be a node Buffer'); - expect(() => nativeImage.createFromBuffer([12, 14, 124, 12])).to.throw('buffer must be a node Buffer'); + expect(() => nativeImage.createFromBuffer(null as any)).to.throw('buffer must be a node Buffer'); + expect(() => nativeImage.createFromBuffer([12, 14, 124, 12] as any)).to.throw('buffer must be a node Buffer'); }); }); @@ -242,15 +176,14 @@ describe('nativeImage module', () => { }); it('returns an image created from the given string', () => { - const imagesData = getImages({ hasDataUrl: true }); - for (const imageData of imagesData) { + for (const imageData of dataUrlImages) { const imageFromPath = nativeImage.createFromPath(imageData.path); - const imageFromDataUrl = nativeImage.createFromDataURL(imageData.dataUrl); + const imageFromDataUrl = nativeImage.createFromDataURL(imageData.dataUrl!); expect(imageFromDataUrl.isEmpty()).to.be.false(); expect(imageFromDataUrl.getSize()).to.deep.equal(imageFromPath.getSize()); expect(imageFromDataUrl.toBitmap()).to.satisfy( - bitmap => imageFromPath.toBitmap().equals(bitmap)); + (bitmap: any) => imageFromPath.toBitmap().equals(bitmap)); expect(imageFromDataUrl.toDataURL()).to.equal(imageFromPath.toDataURL()); } }); @@ -258,9 +191,8 @@ describe('nativeImage module', () => { describe('toDataURL()', () => { it('returns a PNG data URL', () => { - const imagesData = getImages({ hasDataUrl: true }); - for (const imageData of imagesData) { - const imageFromPath = nativeImage.createFromPath(imageData.path); + for (const imageData of dataUrlImages) { + const imageFromPath = nativeImage.createFromPath(imageData.path!); const scaleFactors = [1.0, 2.0]; for (const scaleFactor of scaleFactors) { @@ -270,7 +202,7 @@ describe('nativeImage module', () => { }); it('returns a data URL at 1x scale factor by default', () => { - const imageData = getImage({ filename: 'logo.png' }); + const imageData = imageLogo; const image = nativeImage.createFromPath(imageData.path); const imageOne = nativeImage.createFromBuffer(image.toPNG(), { @@ -289,7 +221,7 @@ describe('nativeImage module', () => { }); it('supports a scale factor', () => { - const imageData = getImage({ filename: 'logo.png' }); + const imageData = imageLogo; const image = nativeImage.createFromPath(imageData.path); const expectedSize = { width: imageData.width, height: imageData.height }; @@ -305,7 +237,7 @@ describe('nativeImage module', () => { describe('toPNG()', () => { it('returns a buffer at 1x scale factor by default', () => { - const imageData = getImage({ filename: 'logo.png' }); + const imageData = imageLogo; const imageA = nativeImage.createFromPath(imageData.path); const imageB = nativeImage.createFromBuffer(imageA.toPNG(), { @@ -324,7 +256,7 @@ describe('nativeImage module', () => { }); it('supports a scale factor', () => { - const imageData = getImage({ filename: 'logo.png' }); + const imageData = imageLogo; const image = nativeImage.createFromPath(imageData.path); const imageFromBufferOne = nativeImage.createFromBuffer( @@ -349,28 +281,28 @@ describe('nativeImage module', () => { }); it('loads images from paths relative to the current working directory', () => { - const imagePath = path.relative('.', path.join(__dirname, 'fixtures', 'assets', 'logo.png')); + const imagePath = path.relative('.', path.join(fixturesPath, 'assets', 'logo.png')); const image = nativeImage.createFromPath(imagePath); expect(image.isEmpty()).to.be.false(); expect(image.getSize()).to.deep.equal({ width: 538, height: 190 }); }); it('loads images from paths with `.` segments', () => { - const imagePath = `${path.join(__dirname, 'fixtures')}${path.sep}.${path.sep}${path.join('assets', 'logo.png')}`; + const imagePath = `${path.join(fixturesPath)}${path.sep}.${path.sep}${path.join('assets', 'logo.png')}`; const image = nativeImage.createFromPath(imagePath); expect(image.isEmpty()).to.be.false(); expect(image.getSize()).to.deep.equal({ width: 538, height: 190 }); }); it('loads images from paths with `..` segments', () => { - const imagePath = `${path.join(__dirname, 'fixtures', 'api')}${path.sep}..${path.sep}${path.join('assets', 'logo.png')}`; + const imagePath = `${path.join(fixturesPath, 'api')}${path.sep}..${path.sep}${path.join('assets', 'logo.png')}`; const image = nativeImage.createFromPath(imagePath); expect(image.isEmpty()).to.be.false(); expect(image.getSize()).to.deep.equal({ width: 538, height: 190 }); }); ifit(process.platform === 'darwin')('Gets an NSImage pointer on macOS', function () { - const imagePath = `${path.join(__dirname, 'fixtures', 'api')}${path.sep}..${path.sep}${path.join('assets', 'logo.png')}`; + const imagePath = `${path.join(fixturesPath, 'api')}${path.sep}..${path.sep}${path.join('assets', 'logo.png')}`; const image = nativeImage.createFromPath(imagePath); const nsimage = image.getNativeHandle(); @@ -382,7 +314,7 @@ describe('nativeImage module', () => { }); ifit(process.platform === 'win32')('loads images from .ico files on Windows', function () { - const imagePath = path.join(__dirname, 'fixtures', 'assets', 'icon.ico'); + const imagePath = path.join(fixturesPath, 'assets', 'icon.ico'); const image = nativeImage.createFromPath(imagePath); expect(image.isEmpty()).to.be.false(); expect(image.getSize()).to.deep.equal({ width: 256, height: 256 }); @@ -413,7 +345,7 @@ describe('nativeImage module', () => { describe('resize(options)', () => { it('returns a resized image', () => { - const image = nativeImage.createFromPath(path.join(__dirname, 'fixtures', 'assets', 'logo.png')); + const image = nativeImage.createFromPath(path.join(fixturesPath, 'assets', 'logo.png')); for (const [resizeTo, expectedSize] of new Map([ [{}, { width: 538, height: 190 }], [{ width: 269 }, { width: 269, height: 95 }], @@ -436,7 +368,7 @@ describe('nativeImage module', () => { }); it('supports a quality option', () => { - const image = nativeImage.createFromPath(path.join(__dirname, 'fixtures', 'assets', 'logo.png')); + const image = nativeImage.createFromPath(path.join(fixturesPath, 'assets', 'logo.png')); const good = image.resize({ width: 100, height: 100, quality: 'good' }); const better = image.resize({ width: 100, height: 100, quality: 'better' }); const best = image.resize({ width: 100, height: 100, quality: 'best' }); @@ -453,7 +385,7 @@ describe('nativeImage module', () => { }); it('returns an empty image when the bounds are invalid', () => { - const image = nativeImage.createFromPath(path.join(__dirname, 'fixtures', 'assets', 'logo.png')); + const image = nativeImage.createFromPath(path.join(fixturesPath, 'assets', 'logo.png')); expect(image.crop({ width: 0, height: 0, x: 0, y: 0 }).isEmpty()).to.be.true(); expect(image.crop({ width: -1, height: 10, x: 0, y: 0 }).isEmpty()).to.be.true(); expect(image.crop({ width: 10, height: -35, x: 0, y: 0 }).isEmpty()).to.be.true(); @@ -461,7 +393,7 @@ describe('nativeImage module', () => { }); it('returns a cropped image', () => { - const image = nativeImage.createFromPath(path.join(__dirname, 'fixtures', 'assets', 'logo.png')); + const image = nativeImage.createFromPath(path.join(fixturesPath, 'assets', 'logo.png')); const cropA = image.crop({ width: 25, height: 64, x: 0, y: 0 }); const cropB = image.crop({ width: 25, height: 64, x: 30, y: 40 }); expect(cropA.getSize()).to.deep.equal({ width: 25, height: 64 }); @@ -470,7 +402,7 @@ describe('nativeImage module', () => { }); it('toBitmap() returns a buffer of the right size', () => { - const image = nativeImage.createFromPath(path.join(__dirname, 'fixtures', 'assets', 'logo.png')); + const image = nativeImage.createFromPath(path.join(fixturesPath, 'assets', 'logo.png')); const crop = image.crop({ width: 25, height: 64, x: 0, y: 0 }); expect(crop.toBitmap().length).to.equal(25 * 64 * 4); }); @@ -482,7 +414,7 @@ describe('nativeImage module', () => { }); it('returns an aspect ratio of an image', () => { - const imageData = getImage({ filename: 'logo.png' }); + const imageData = imageLogo; // imageData.width / imageData.height = 2.831578947368421 const expectedAspectRatio = 2.8315789699554443; @@ -510,7 +442,7 @@ describe('nativeImage module', () => { }); it('returns native image given valid params', async () => { - const goodPath = path.join(__dirname, 'fixtures', 'assets', 'logo.png'); + const goodPath = path.join(fixturesPath, 'assets', 'logo.png'); const goodSize = { width: 100, height: 100 }; const result = await nativeImage.createThumbnailFromPath(goodPath, goodSize); expect(result.isEmpty()).to.equal(false); @@ -533,7 +465,7 @@ describe('nativeImage module', () => { it('supports adding a buffer representation for a scale factor', () => { const image = nativeImage.createEmpty(); - const imageDataOne = getImage({ width: 1, height: 1 }); + const imageDataOne = image1x1; image.addRepresentation({ scaleFactor: 1.0, buffer: nativeImage.createFromPath(imageDataOne.path).toPNG() @@ -541,7 +473,7 @@ describe('nativeImage module', () => { expect(image.getScaleFactors()).to.deep.equal([1]); - const imageDataTwo = getImage({ width: 2, height: 2 }); + const imageDataTwo = image2x2; image.addRepresentation({ scaleFactor: 2.0, buffer: nativeImage.createFromPath(imageDataTwo.path).toPNG() @@ -549,7 +481,7 @@ describe('nativeImage module', () => { expect(image.getScaleFactors()).to.deep.equal([1, 2]); - const imageDataThree = getImage({ width: 3, height: 3 }); + const imageDataThree = image3x3; image.addRepresentation({ scaleFactor: 3.0, buffer: nativeImage.createFromPath(imageDataThree.path).toPNG() @@ -559,7 +491,7 @@ describe('nativeImage module', () => { image.addRepresentation({ scaleFactor: 4.0, - buffer: 'invalid' + buffer: 'invalid' as any }); // this one failed, so it shouldn't show up in the scale factors @@ -577,19 +509,19 @@ describe('nativeImage module', () => { it('supports adding a data URL representation for a scale factor', () => { const image = nativeImage.createEmpty(); - const imageDataOne = getImage({ width: 1, height: 1 }); + const imageDataOne = image1x1; image.addRepresentation({ scaleFactor: 1.0, dataURL: imageDataOne.dataUrl }); - const imageDataTwo = getImage({ width: 2, height: 2 }); + const imageDataTwo = image2x2; image.addRepresentation({ scaleFactor: 2.0, dataURL: imageDataTwo.dataUrl }); - const imageDataThree = getImage({ width: 3, height: 3 }); + const imageDataThree = image3x3; image.addRepresentation({ scaleFactor: 3.0, dataURL: imageDataThree.dataUrl @@ -610,16 +542,16 @@ describe('nativeImage module', () => { }); it('supports adding a representation to an existing image', () => { - const imageDataOne = getImage({ width: 1, height: 1 }); + const imageDataOne = image1x1; const image = nativeImage.createFromPath(imageDataOne.path); - const imageDataTwo = getImage({ width: 2, height: 2 }); + const imageDataTwo = image2x2; image.addRepresentation({ scaleFactor: 2.0, dataURL: imageDataTwo.dataUrl }); - const imageDataThree = getImage({ width: 3, height: 3 }); + const imageDataThree = image3x3; image.addRepresentation({ scaleFactor: 2.0, dataURL: imageDataThree.dataUrl