eric/as-dithered-image
1
0
Fork 0
mirror of https://github.com/andrewstephens75/as-dithered-image.git synced 2026-04-14 12:29:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10 from andrewstephens75/fix_scaling_problem_on_certain_browsers

Browse Source 
Finally brute-force fixed the problem with scaled views
This commit is contained in:
andrewstephens75
2024-02-24 19:58:18 -05:00
committed by GitHub
parent f69a82577a fdef784e41
commit 4f79f08721
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
as-dithered-image.js
View File

@@ -8,6 +8,8 @@ const DITHERED_IMAGE_STYLE = `
} }
` `
const workerPath = document.currentScript.src.replace("as-dithered-image.js", "ditherworker.js")
class ASDitheredImage extends HTMLElement { class ASDitheredImage extends HTMLElement {
constructor() { constructor() {
super() super()
@@ -19,7 +21,7 @@ class ASDitheredImage extends HTMLElement {
this.context_ = undefined this.context_ = undefined
this.image_loading_ = false this.image_loading_ = false
this.ignore_next_resize_ = false this.ignore_next_resize_ = false
this.worker_ = new Worker("ditherworker.js") this.worker_ = new Worker(workerPath)
this.cutoff_ = 0.5 this.cutoff_ = 0.5
this.darkrgba_ = [0, 0, 0, 255] this.darkrgba_ = [0, 0, 0, 255]
this.lightrgba_ = [255, 255, 255, 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 // 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 // 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. // 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) { if ((1.0 / fractionalPart) > 3) {
fractionalPart = 0 fractionalPart = 0
screenPixelsToBackingStorePixels = Math.round(screenPixelsToBackingStorePixels) screenPixelsToBackingStorePixels = Math.round(screenPixelsToBackingStorePixels)
@@ -257,7 +263,7 @@ class ASDitheredImage extends HTMLElement {
const calculatedWidth = Math.round(rect.width * screenPixelsToBackingStorePixels) const calculatedWidth = Math.round(rect.width * screenPixelsToBackingStorePixels)
const calculatedHeight = Math.round(rect.height * screenPixelsToBackingStorePixels) const calculatedHeight = Math.round(rect.height * screenPixelsToBackingStorePixels)
let adjustedPixelSize = screenPixelsToBackingStorePixels * this.crunchFactor_ let adjustedPixelSize = Math.round(screenPixelsToBackingStorePixels * this.crunchFactor_)
// double check - we may have already painted this image // double check - we may have already painted this image
if ((this.last_draw_state_.width == calculatedWidth) && if ((this.last_draw_state_.width == calculatedWidth) &&