Eric Taylor
9a313c53a8
the theme is customized for this site so having it as a sub repo dosent make sense
73 lines
3.3 KiB
JavaScript
73 lines
3.3 KiB
JavaScript
onmessage = function (e) {
|
|
|
|
const result = dither(e.data.imageData, e.data.pixelSize, e.data.cutoff, e.data.blackRGBA, e.data.whiteRGBA)
|
|
const reply = {}
|
|
reply.imageData = result
|
|
reply.pixelSize = e.data.pixelSize
|
|
reply.cutoff = e.data.cutoff
|
|
postMessage(reply)
|
|
}
|
|
|
|
function getRGBAArrayBuffer(color) {
|
|
let buffer = new ArrayBuffer(4)
|
|
for (let i = 0; i < 4; ++i) {
|
|
buffer[i] = color[i]
|
|
}
|
|
return buffer
|
|
}
|
|
|
|
function dither(imageData, scaleFactor, cutoff, blackRGBA, whiteRGBA) {
|
|
const blackRGBABuffer = getRGBAArrayBuffer(blackRGBA)
|
|
const whiteRGBABuffer = getRGBAArrayBuffer(whiteRGBA)
|
|
let output = new ImageData(imageData.width * scaleFactor, imageData.height * scaleFactor)
|
|
for (let i = 0; i < imageData.data.length; i += 4) {
|
|
imageData.data[i] = imageData.data[i + 1] = imageData.data[i + 2] = Math.floor(imageData.data[i] * 0.3 + imageData.data[i + 1] * 0.59 + imageData.data[i + 2] * 0.11)
|
|
}
|
|
|
|
// most implementations I see just distribute error into the existing image, wrapping around edge pixels
|
|
// this implementation uses a sliding window of floats for more accuracy (probably not needed really)
|
|
|
|
let slidingErrorWindow = [new Float32Array(imageData.width), new Float32Array(imageData.width), new Float32Array(imageData.width)]
|
|
const offsets = [[1, 0], [2, 0], [-1, 1], [0, 1], [1, 1], [0, 2]]
|
|
|
|
for (let y = 0, limY = imageData.height; y < limY; ++y) {
|
|
for (let x = 0, limX = imageData.width; x < limX; ++x) {
|
|
let i = ((y * limX) + x) * 4;
|
|
let accumulatedError = Math.floor(slidingErrorWindow[0][x])
|
|
let expectedMono = imageData.data[i] + accumulatedError
|
|
let monoValue = expectedMono
|
|
if (monoValue <= Math.floor(cutoff * 255)) {
|
|
monoValue = 0
|
|
} else {
|
|
monoValue = 255
|
|
}
|
|
let error = (expectedMono - monoValue) / 8.0
|
|
for (let q = 0; q < offsets.length; ++q) {
|
|
let offsetX = offsets[q][0] + x
|
|
let offsetY = offsets[q][1] + y
|
|
if ((offsetX >= 0) && (offsetX < slidingErrorWindow[0].length))
|
|
slidingErrorWindow[offsets[q][1]][offsetX] += error
|
|
}
|
|
|
|
// this is stupid but we have to do the pixel scaling ourselves because safari insists on interpolating putImageData
|
|
// which gives us blurry pixels (and it doesn't support the createImageBitmap call with an ImageData instance which
|
|
// would make this easy)
|
|
let rgba = (monoValue == 0) ? blackRGBABuffer : whiteRGBABuffer
|
|
|
|
for (let scaleY = 0; scaleY < scaleFactor; ++scaleY) {
|
|
let pixelOffset = (((y * scaleFactor + scaleY) * output.width) + (x * scaleFactor)) * 4
|
|
for (let scaleX = 0; scaleX < scaleFactor; ++scaleX) {
|
|
output.data[pixelOffset] = rgba[0]
|
|
output.data[pixelOffset + 1] = rgba[1]
|
|
output.data[pixelOffset + 2] = rgba[2]
|
|
output.data[pixelOffset + 3] = rgba[3]
|
|
pixelOffset += 4
|
|
}
|
|
}
|
|
}
|
|
// move the sliding window
|
|
slidingErrorWindow.push(slidingErrorWindow.shift())
|
|
slidingErrorWindow[2].fill(0, 0, slidingErrorWindow[2].length)
|
|
}
|
|
return output
|
|
} |