refactor(scan): use canvas createImageData

I originally made my own version of it because we were using `sharp` to do some of the image processing. We're no longer doing that, so we don't need this anymore. In fact, the results of this function are not compatible with `canvas`, so it's better to just generate them using `canvas` directly.

libs/ballot-interpreter-vx/src/cli/commands/layout.ts

@@ -1,10 +1,10 @@
 import { Point, Rect } from '@votingworks/types';
 import { assert } from '@votingworks/utils';
 import chalk from 'chalk';
+import { createImageData } from 'canvas';
 import { GlobalOptions, OptionParseError } from '..';
 import { findContests, ContestShape } from '../../hmpb/find_contests';
 import { binarize, RGBA } from '../../utils/binarize';
-import { createImageData } from '../../utils/canvas';
 import { vh } from '../../utils/flip';
 import { getImageChannelCount } from '../../utils/image_format_utils';
 import { loadImageData, writeImageData } from '../../utils/images';

libs/ballot-interpreter-vx/src/utils/binarize.test.ts

@@ -1,6 +1,6 @@
+import { createImageData } from 'canvas';
 import { croppedQrCode } from '../../test/fixtures';
 import { binarize, RGBA_BLACK, RGBA_WHITE } from './binarize';
-import { createImageData } from './canvas';
 
 test('binarize grayscale', async () => {
   const imageData = createImageData(2, 2);

libs/ballot-interpreter-vx/src/utils/crop.test.ts

@@ -1,6 +1,6 @@
 import { Rect } from '@votingworks/types';
+import { createImageData } from 'canvas';
 import { randomImage, randomInset } from '../../test/utils';
-import { createImageData } from './canvas';
 import { crop } from './crop';
 
 /**

libs/ballot-interpreter-vx/src/utils/crop.ts

@@ -1,5 +1,5 @@
 import { Rect } from '@votingworks/types';
-import { createImageData } from './canvas';
+import { createImageData } from 'canvas';
 
 /**
  * Returns a new image cropped to the specified bounds.

libs/ballot-interpreter-vx/src/utils/flip.test.ts

@@ -1,4 +1,4 @@
-import { createImageData } from './canvas';
+import { createImageData } from 'canvas';
 import { vh } from './flip';
 
 test('vh does nothing to 1x1 image (in-place, rgba)', () => {

libs/ballot-interpreter-vx/src/utils/grayscale.test.ts

@@ -1,15 +1,11 @@
-import { createImageData } from './canvas';
+import { createImageData } from 'canvas';
 import { fromGray, fromRgba } from './grayscale';
 
 test('fromGray with grayscale image', () => {
   const imageData = createImageData(Uint8ClampedArray.of(127), 1, 1);
 
   fromGray(imageData);
-  expect(imageData).toEqual({
-    data: Uint8ClampedArray.of(127),
-    width: 1,
-    height: 1,
-  });
+  expect(imageData).toEqual(createImageData(Uint8ClampedArray.of(127), 1, 1));
 });
 
 test('fromGray with grayscale image copied', () => {
@@ -32,11 +28,9 @@ test('fromRGBA with grayscale image', () => {
   );
 
   fromRgba(imageData);
-  expect(imageData).toEqual({
-    data: Uint8ClampedArray.of(127, 127, 127, 255),
-    width: 1,
-    height: 1,
-  });
+  expect(imageData).toEqual(
+    createImageData(Uint8ClampedArray.of(127, 127, 127, 255), 1, 1)
+  );
 });
 
 test('fromRGBA with grayscale image copied', () => {
@@ -55,11 +49,9 @@ test('fromRGBA with color image', () => {
   const imageData = createImageData(Uint8ClampedArray.of(255, 0, 0, 255), 1, 1);
 
   fromRgba(imageData);
-  expect(imageData).toEqual({
-    data: Uint8ClampedArray.of(53, 53, 53, 255),
-    width: 1,
-    height: 1,
-  });
+  expect(imageData).toEqual(
+    createImageData(Uint8ClampedArray.of(53, 53, 53, 255), 1, 1)
+  );
 });
 
 test('fromRGBA with color image copied RGBA image', () => {
@@ -71,11 +63,9 @@ test('fromRGBA with color image copied RGBA image', () => {
   );
 
   fromRgba(src, dst);
-  expect(dst).toEqual({
-    data: Uint8ClampedArray.of(53, 53, 53, 255),
-    width: 1,
-    height: 1,
-  });
+  expect(dst).toEqual(
+    createImageData(Uint8ClampedArray.of(53, 53, 53, 255), 1, 1)
+  );
 });
 
 test('fromRGBA with color image copied to single-channel image', () => {
@@ -87,9 +77,5 @@ test('fromRGBA with color image copied to single-channel image', () => {
   );
 
   fromRgba(src, dst);
-  expect(dst).toEqual({
-    data: Uint8ClampedArray.of(53),
-    width: 1,
-    height: 1,
-  });
+  expect(dst).toEqual(createImageData(Uint8ClampedArray.of(53), 1, 1));
 });

libs/ballot-interpreter-vx/src/utils/jsfeat/diff.test.ts

@@ -1,7 +1,7 @@
 import { Rect } from '@votingworks/types';
+import { createImageData } from 'canvas';
 import { croppedQrCode } from '../../../test/fixtures';
 import { PIXEL_BLACK, PIXEL_WHITE } from '../binarize';
-import { createImageData } from '../canvas';
 import { crop } from '../crop';
 import { diff, countPixels, ratio } from './diff';
 

libs/ballot-interpreter-vx/src/utils/jsfeat/mat_to_image_data.ts

@@ -1,5 +1,5 @@
 import * as jsfeat from 'jsfeat';
-import { createImageData } from '../canvas';
+import { createImageData } from 'canvas';
 
 export function matToImageData(mat: jsfeat.matrix_t): ImageData {
   const imageData = createImageData(mat.cols, mat.rows);

libs/ballot-interpreter-vx/src/utils/outline.ts

@@ -1,5 +1,5 @@
+import { createImageData } from 'canvas';
 import { PIXEL_BLACK } from './binarize';
-import { createImageData } from './canvas';
 import { getImageChannelCount } from './image_format_utils';
 
 /**

libs/ballot-interpreter-vx/src/utils/template_map.test.ts

@@ -1,5 +1,5 @@
 import { BallotType, BallotPageLayoutWithImage } from '@votingworks/types';
-import { createImageData } from './canvas';
+import { createImageData } from 'canvas';
 import { templateMap, TemplateMapKey } from './template_map';
 
 test('no locale info', () => {

libs/ballot-interpreter-vx/test/utils.ts

@@ -1,7 +1,7 @@
 import { Rect } from '@votingworks/types';
 import { assert } from '@votingworks/utils';
 import { randomBytes } from 'crypto';
-import { createImageData } from '../src/utils/canvas';
+import { createImageData } from 'canvas';
 
 export function randomImage({
   width = 0,