From 14c5150e6b010e5b81036310f49fafeb52c7aef8 Mon Sep 17 00:00:00 2001 From: Kyle Smith Date: Tue, 9 Dec 2025 15:55:44 -0600 Subject: [PATCH 1/2] Add demo HTML page --- .npmignore | 2 + index.html | 145 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 147 insertions(+) create mode 100644 .npmignore create mode 100644 index.html diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..5725c12 --- /dev/null +++ b/.npmignore @@ -0,0 +1,2 @@ +index.html +/.github/ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e492819 --- /dev/null +++ b/index.html @@ -0,0 +1,145 @@ + + + + + + @rolemodel/image-diff Demo + + + +
+ + +
+ +
+
Original
+ +
+ +
+
+ Modified +
+ +
+
+ +
+ +
+
+ Result +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ +
+ + + + From 60a0d6be80a56db0c980b1fafff826672b19aa8c Mon Sep 17 00:00:00 2001 From: Kyle Smith Date: Tue, 9 Dec 2025 16:01:39 -0600 Subject: [PATCH 2/2] Fix readme --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 561835b..bb0e12d 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,8 @@ import ImageDiff from "@rolemodel/image-diff" const originalImage = document.getElementById('base-image') const newImage = document.getElementById('new-image') +const outputCanvas = document.getElementById('output-canvas') +const outputContext = outputCanvas.getContext('2d') const imageDiff = new ImageDiff(originalImage, newImage) const result = imageDiff.update({ @@ -29,8 +31,8 @@ const result = imageDiff.update({ backgroundAlpha: 1.0 }) -// result is a canvas element -document.body.appendChild(result) +// result is an offscreen canvas +outputContext.drawImage(result, 0, 0) imageDiff.dispose() ```