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

Crunch Factor Working

Browse Source
This commit is contained in:
Andrew Stephens
2023-01-02 11:32:06 -05:00
parent abb1dffbcc
commit 82ad58d476
2 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
as-dithered-image.js
View File

@@ -14,7 +14,7 @@ class ASDitheredImage extends HTMLElement {
this.original_image_ = undefined this.original_image_ = undefined
this.force_refresh_ = false this.force_refresh_ = false
this.crunchFactor = this.getAutoCrunchFactor() this.crunchFactor_ = this.getAutoCrunchFactor()
this.canvas_ = undefined this.canvas_ = undefined
this.context_ = undefined this.context_ = undefined
this.image_loading_ = false this.image_loading_ = false
@@ -175,19 +175,28 @@ class ASDitheredImage extends HTMLElement {
repaintImage() { repaintImage() {
const rect = this.canvas_.getBoundingClientRect() const rect = this.canvas_.getBoundingClientRect()
const screenPixelsToBackingStorePixels = this.getDevicePixelRatio() let screenPixelsToBackingStorePixels = this.getDevicePixelRatio()
let fractionalPart = screenPixelsToBackingStorePixels - Math.floor(screenPixelsToBackingStorePixels)
if (fractionalPart != 0) {
screenPixelsToBackingStorePixels = Math.round(screenPixelsToBackingStorePixels * Math.round(1.0 / fractionalPart))
}
let adjustedPixelSize = screenPixelsToBackingStorePixels * this.crunchFactor_
// this has to change for fractional device pixel ratios // this has to change for fractional device pixel ratios
this.canvas_.width = rect.width * screenPixelsToBackingStorePixels this.canvas_.width = rect.width * screenPixelsToBackingStorePixels
this.canvas_.height = rect.height * screenPixelsToBackingStorePixels this.canvas_.height = rect.height * screenPixelsToBackingStorePixels
this.context_.imageSmoothingEnabled = false this.context_.imageSmoothingEnabled = true
this.context_.drawImage(this.original_image_, 0, 0, this.canvas_.width, this.canvas_.height) this.context_.drawImage(this.original_image_, 0, 0, this.canvas_.width / adjustedPixelSize, this.canvas_.height / adjustedPixelSize)
const originalData = this.context_.getImageData(0, 0, this.canvas_.width, this.canvas_.height) const originalData = this.context_.getImageData(0, 0, this.canvas_.width / adjustedPixelSize, this.canvas_.height / adjustedPixelSize)
this.context_.fillStyle = "white"
this.context_.fillRect(0, 0, this.canvas_.width, this.canvas_.height) this.context_.fillRect(0, 0, this.canvas_.width, this.canvas_.height)
// TODO: look at transferring the data in a different datastructure to prevent copying // TODO: look at transferring the data in a different datastructure to prevent copying
// unfortunately Safari has poor support for createImageBitmap - using it with ImageData doesn't work
const msg = {} const msg = {}
msg.imageData = originalData msg.imageData = originalData
msg.pixelSize = adjustedPixelSize
this.worker_.postMessage(msg) this.worker_.postMessage(msg)
this.force_refresh_ = false this.force_refresh_ = false

2
ditherworker.js
View File

@@ -1,7 +1,7 @@
onmessage = function (e) { onmessage = function (e) {
console.log("Worker: start", e.data.imageData) console.log("Worker: start", e.data.imageData)
const result = dither(e.data.imageData, 1) const result = dither(e.data.imageData, e.data.pixelSize)
const reply = {} const reply = {}
reply.imageData = result reply.imageData = result
postMessage(reply) postMessage(reply)