use much faster background canvas composition for generating atlas ma…

…sk images, instead of `ImageData` manipulation

bump version

deno.json

@@ -1,6 +1,6 @@
 {
 	"name": "jacked_atlas_ts",
-	"version": "0.1.4",
+	"version": "0.1.5",
 	"description": "a tool for extracting region of interest based on a bitmap mask",
 	"author": "Omar Azmi",
 	"license": "Lulz plz don't steal yet",

src/deps.ts

@@ -6,3 +6,7 @@ export { UnitInterval } from "https://deno.land/x/[email protected]/typedefs
 
 export type Ctx2D = CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
 
+export const rgbaToHex = (rgba: [r: number, g: number, b: number, a: number]) => "#" + rgba.map(x => {
+	const hex = x.toString(16)
+	return hex.length === 2 ? hex : "0" + hex
+}).join("")

src/jatlas.ts

@@ -1,4 +1,4 @@
-import { AnyImageSource, Base64ImageString, ImageBlob, Intervals, Rect, SimpleImageData, blobToBase64, constructImageBitmapSource, constructImageBlob, constructImageData, coordinateTransformer, getBGCanvas, getBGCtx, sliceIntervalsTypedSubarray } from "./deps.ts"
+import { AnyImageSource, Base64ImageString, ImageBlob, Intervals, Rect, SimpleImageData, blobToBase64, constructImageBitmapSource, constructImageBlob, constructImageData, coordinateTransformer, getBGCanvas, getBGCtx, sliceIntervalsTypedSubarray, rgbaToHex } from "./deps.ts"
 import { Sprite } from "./sprite.ts"
 
 type FilePath = string
@@ -387,24 +387,24 @@ export class JAtlasManager {
 		for (const [id, mask] of Object.entries(this.entries)) {
 			queued_drawings.push(
 				mask.loaded
-					.then(m => constructImageData(m.data!))
-					.then(mask_img_data => {
+					.then(async (m) => {
 						const
-							{ width: w, height: h, data } = mask_img_data,
-							color = id_coloring_func!(parseFloat(id))
-						console.log(color, mask.rect.x, mask.rect.y, w, h)
-						for (let i = 0, len = data.length; i < len; i += 4) {
-							if (data[i] + data[i + 1] + data[i + 2] > 0) {
-								data[i] = color[0]
-								data[i + 1] = color[1]
-								data[i + 2] = color[2]
-								data[i + 3] = color[3]
-							} else data[i + 3] = 0
-						}
-						return createImageBitmap(mask_img_data)
-					})
-					.then((bitmap) => {
-						ctx.drawImage(bitmap, mask.rect.x, mask.rect.y)
+							mask_img_bitmap = await createImageBitmap(m.data!),
+							{ width: w, height: h } = m.rect,
+							color = rgbaToHex(id_coloring_func!(parseFloat(id)))
+						bg_canvas.width = w
+						bg_canvas.height = h
+						bg_ctx.resetTransform()
+						bg_ctx.globalCompositeOperation = "copy"
+						bg_ctx.drawImage(mask_img_bitmap, 0, 0)
+						bg_ctx.globalCompositeOperation = "source-in"
+						bg_ctx.fillStyle = color
+						bg_ctx.fillRect(0, 0, w, h)
+						ctx.drawImage(
+							bg_canvas.transferToImageBitmap(),
+							m.rect.x,
+							m.rect.y
+						)
 					})
 			)
 		}