feat(pixel): update .blitCanvas(), .toImageData()

BREAKING CHANGE: add BlitCanvasOpts for optional .blitCanvas() args - update .blitCanvas() impls - update .toImageData() impls to accept pre-existing ImageData instance - add ensureImageData() check
thi-ng · Sep 27, 2022 · 85e4e38 · 85e4e38
1 parent 4656c50
commit 85e4e38
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 15 deletions.
diff --git a/packages/pixel/src/api.ts b/packages/pixel/src/api.ts
@@ -238,16 +238,15 @@ export interface IBlit<T extends IPixelBuffer> {
 	 */
 	blitCanvas(
 		canvas: HTMLCanvasElement | CanvasRenderingContext2D,
-		x?: number,
-		y?: number
+		opts?: Partial<BlitCanvasOpts>
 	): void;
 }
 
 export interface IToImageData {
 	/**
 	 * Returns the contents of the pixel buffer as HTML canvas `ImageData`.
 	 */
-	toImageData(): ImageData;
+	toImageData(idata?: ImageData): ImageData;
 }
 
 export interface IBlend<T extends IPixelBuffer, F> {
@@ -328,6 +327,25 @@ export interface BlitOpts {
 	h: number;
 }
 
+export interface BlitCanvasOpts {
+	/**
+	 * Pre-existing ImageData instance (must be same dimensions as pixel buffer)
+	 */
+	data: ImageData;
+	/**
+	 * Target X coordinate
+	 *
+	 * @defaultValue 0
+	 */
+	x: number;
+	/**
+	 * Target Y coordinate
+	 *
+	 * @defaultValue 0
+	 */
+	y: number;
+}
+
 export type PoolTemplate = Fn3<string[], number, number, string>;
 
 export interface ConvolutionKernelSpec {

diff --git a/packages/pixel/src/checks.ts b/packages/pixel/src/checks.ts
@@ -10,6 +10,20 @@ export const ensureSize = (
 	stride = 1
 ) => assert(data.length >= width * height * stride, "pixel buffer too small");
 
+/** @internal */
+export const ensureImageData = (
+	data: ImageData | undefined,
+	width: number,
+	height: number
+) =>
+	data
+		? (assert(
+				data.width === width && data.height === height,
+				"imagedata has wrong dimensions"
+		  ),
+		  data)
+		: new ImageData(width, height);
+
 /** @internal */
 export const ensureChannel = (fmt: IntFormat | FloatFormat, id: number) => {
 	const chan = fmt.channels[id];

diff --git a/packages/pixel/src/float.ts b/packages/pixel/src/float.ts
@@ -8,6 +8,7 @@ import { clamp01 } from "@thi.ng/math/interval";
 import { postmultiply, premultiply } from "@thi.ng/porter-duff/premultiply";
 import type {
 	BlendFnFloat,
+	BlitCanvasOpts,
 	BlitOpts,
 	Filter,
 	FloatFormat,
@@ -21,7 +22,7 @@ import type {
 	IResizable,
 	IToImageData,
 } from "./api.js";
-import { ensureChannel, ensureSize } from "./checks.js";
+import { ensureChannel, ensureImageData, ensureSize } from "./checks.js";
 import { defFloatFormat } from "./format/float-format.js";
 import { FLOAT_GRAY } from "./format/float-gray.js";
 import { FLOAT_RGBA } from "./index.js";
@@ -320,18 +321,17 @@ export class FloatBuffer
 
 	blitCanvas(
 		canvas: HTMLCanvasElement | CanvasRenderingContext2D,
-		x = 0,
-		y = 0
+		opts: Partial<BlitCanvasOpts> = {}
 	) {
 		const ctx =
 			canvas instanceof HTMLCanvasElement
 				? canvas.getContext("2d")!
 				: canvas;
-		ctx.putImageData(this.toImageData(), x, y);
+		ctx.putImageData(this.toImageData(opts.data), opts.x || 0, opts.y || 0);
 	}
 
-	toImageData() {
-		const idata = new ImageData(this.width, this.height);
+	toImageData(idata?: ImageData) {
+		idata = ensureImageData(idata, this.width, this.height);
 		const dest = new Uint32Array(idata.data.buffer);
 		const {
 			stride: [stride],

diff --git a/packages/pixel/src/int.ts b/packages/pixel/src/int.ts
@@ -11,6 +11,7 @@ import {
 } from "@thi.ng/porter-duff/premultiply";
 import {
 	BlendFnInt,
+	BlitCanvasOpts,
 	BlitOpts,
 	Filter,
 	IBlend,
@@ -26,7 +27,12 @@ import {
 	Lane,
 } from "./api.js";
 import { canvasPixels, imageCanvas } from "./canvas.js";
-import { ensureAlpha, ensureChannel, ensureSize } from "./checks.js";
+import {
+	ensureAlpha,
+	ensureChannel,
+	ensureImageData,
+	ensureSize,
+} from "./checks.js";
 import { ABGR8888 } from "./format/abgr8888.js";
 import { defIntFormat } from "./format/int-format.js";
 import {
@@ -277,18 +283,17 @@ export class IntBuffer
 
 	blitCanvas(
 		canvas: HTMLCanvasElement | CanvasRenderingContext2D,
-		x = 0,
-		y = 0
+		opts: Partial<BlitCanvasOpts> = {}
 	) {
 		const ctx =
 			canvas instanceof HTMLCanvasElement
 				? canvas.getContext("2d")!
 				: canvas;
-		ctx.putImageData(this.toImageData(), x, y);
+		ctx.putImageData(this.toImageData(opts.data), opts.x || 0, opts.y || 0);
 	}
 
-	toImageData() {
-		const idata = new ImageData(this.width, this.height);
+	toImageData(idata?: ImageData) {
+		idata = ensureImageData(idata, this.width, this.height);
 		const dest = new Uint32Array(idata.data.buffer);
 		const src = this.data;
 		const fmt = this.format.toABGR;