From 2a7ca16fe7bed951630adbdfdbcbce1c9a3ca8e3 Mon Sep 17 00:00:00 2001 From: Andrew Stephens Date: Sat, 24 Feb 2024 19:50:50 -0500 Subject: [PATCH 1/2] Finally brute-force fixed the problem with scaled views on certain browsers --- as-dithered-image.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/as-dithered-image.js b/as-dithered-image.js index d6e1f76..16cafcb 100644 --- a/as-dithered-image.js +++ b/as-dithered-image.js @@ -8,6 +8,8 @@ const DITHERED_IMAGE_STYLE = ` } ` +const workerPath = document.currentScript.src.replace("as-dithered-image.js", "ditherworker.js") + class ASDitheredImage extends HTMLElement { constructor() { super() @@ -19,7 +21,7 @@ class ASDitheredImage extends HTMLElement { this.context_ = undefined this.image_loading_ = false this.ignore_next_resize_ = false - this.worker_ = new Worker("ditherworker.js") + this.worker_ = new Worker(workerPath) this.cutoff_ = 0.5 this.darkrgba_ = [0, 0, 0, 255] this.lightrgba_ = [255, 255, 255, 255] @@ -247,6 +249,10 @@ class ASDitheredImage extends HTMLElement { // to serve up at different zoom levels. I can understand nice fractions like 2.5 but 1.110004 and 0.89233 are just stupid // If the fractional part doesn't make sense then just ignore it. This will give incorrect results but they still look // pretty good if you don't look too closely. + if (this.getAttribute("crunch") == "pixel") { + this.crunchFactor_ = 1.0 / this.getDevicePixelRatio() + } + if ((1.0 / fractionalPart) > 3) { fractionalPart = 0 screenPixelsToBackingStorePixels = Math.round(screenPixelsToBackingStorePixels) @@ -257,7 +263,9 @@ class ASDitheredImage extends HTMLElement { const calculatedWidth = Math.round(rect.width * screenPixelsToBackingStorePixels) const calculatedHeight = Math.round(rect.height * screenPixelsToBackingStorePixels) - let adjustedPixelSize = screenPixelsToBackingStorePixels * this.crunchFactor_ + let adjustedPixelSize = Math.round(screenPixelsToBackingStorePixels * this.crunchFactor_) + + console.log("cunch: ", this.crunchFactor_, " adjustedPixelSize : ", adjustedPixelSize) // double check - we may have already painted this image if ((this.last_draw_state_.width == calculatedWidth) && From fdef784e419570763bd18de6c218b03ef18da45b Mon Sep 17 00:00:00 2001 From: Andrew Stephens Date: Sat, 24 Feb 2024 19:57:22 -0500 Subject: [PATCH 2/2] Remove logging --- as-dithered-image.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/as-dithered-image.js b/as-dithered-image.js index 16cafcb..aa7b85d 100644 --- a/as-dithered-image.js +++ b/as-dithered-image.js @@ -265,8 +265,6 @@ class ASDitheredImage extends HTMLElement { const calculatedHeight = Math.round(rect.height * screenPixelsToBackingStorePixels) let adjustedPixelSize = Math.round(screenPixelsToBackingStorePixels * this.crunchFactor_) - console.log("cunch: ", this.crunchFactor_, " adjustedPixelSize : ", adjustedPixelSize) - // double check - we may have already painted this image if ((this.last_draw_state_.width == calculatedWidth) && (this.last_draw_state_.height == calculatedHeight) &&