evomeme 0.1.9 → 0.1.10

package/dist/canvas-public/workers/color-key-worker.js

@@ -0,0 +1,289 @@
+let sourceBitmap = null
+let previewSource = null
+let previewLab = null
+let previewWidth = 0
+let previewHeight = 0
+const linearChannel = new Float32Array(256)
+
+for (let value = 0; value < linearChannel.length; value += 1) {
+  const channel = value / 255
+  linearChannel[value] = channel <= 0.04045
+    ? channel / 12.92
+    : ((channel + 0.055) / 1.055) ** 2.4
+}
+
+self.addEventListener('message', async (event) => {
+  const message = event.data || {}
+  try {
+    if (message.type === 'init') {
+      const response = await fetch(String(message.url || ''))
+      if (!response.ok) throw workerError('workers.imageLoadFailed', { status: response.status })
+      sourceBitmap?.close?.()
+      sourceBitmap = await createImageBitmap(await response.blob())
+      if (message.purpose !== 'exact') {
+        const scale = Math.min(1, 900 / Math.max(sourceBitmap.width, sourceBitmap.height))
+        previewWidth = Math.max(1, Math.round(sourceBitmap.width * scale))
+        previewHeight = Math.max(1, Math.round(sourceBitmap.height * scale))
+        const canvas = new OffscreenCanvas(previewWidth, previewHeight)
+        const context = canvas.getContext('2d', { willReadFrequently: true })
+        context.drawImage(sourceBitmap, 0, 0, previewWidth, previewHeight)
+        previewSource = context.getImageData(0, 0, previewWidth, previewHeight)
+        previewLab = prepareOklab(previewSource.data)
+      }
+      self.postMessage({
+        type: 'ready',
+        width: sourceBitmap.width,
+        height: sourceBitmap.height,
+      })
+      return
+    }
+
+    if (!sourceBitmap) throw workerError('workers.colorKey.notInitialized')
+    const color = normalizeColor(message.color)
+    const strength = normalizeStrength(message.strength)
+    if (message.type === 'preview') {
+      if (!previewSource || !previewLab) throw workerError('workers.colorKey.previewNotInitialized')
+      const pixels = applyColorKeyPixels(
+        previewSource.data,
+        color,
+        strength,
+        previewWidth,
+        previewHeight,
+        previewLab,
+        message.contiguousOnly === true,
+        message.despill === true,
+      )
+      const canvas = new OffscreenCanvas(previewWidth, previewHeight)
+      canvas.getContext('2d').putImageData(new ImageData(pixels, previewWidth, previewHeight), 0, 0)
+      const bitmap = canvas.transferToImageBitmap()
+      self.postMessage({ type: 'preview', requestId: message.requestId, bitmap }, [bitmap])
+      return
+    }
+
+    if (message.type === 'exact') {
+      const width = sourceBitmap.width
+      const height = sourceBitmap.height
+      const canvas = new OffscreenCanvas(width, height)
+      const context = canvas.getContext('2d', { willReadFrequently: true })
+      context.drawImage(sourceBitmap, 0, 0)
+      const source = context.getImageData(0, 0, width, height)
+      const pixels = applyColorKeyPixels(
+        source.data,
+        color,
+        strength,
+        width,
+        height,
+        null,
+        message.contiguousOnly === true,
+        message.despill === true,
+      )
+      context.putImageData(new ImageData(pixels, width, height), 0, 0)
+      const blob = await canvas.convertToBlob({ type: 'image/png' })
+      self.postMessage({
+        type: 'exact',
+        requestId: message.requestId,
+        blob,
+        width,
+        height,
+      })
+    }
+  } catch (error) {
+    self.postMessage({
+      type: 'error',
+      requestId: message.requestId,
+      messageKey: error?.messageKey || '',
+      messageVariables: error?.messageVariables || null,
+      message: error?.messageKey ? '' : String(error?.message || error),
+    })
+  }
+})
+
+function workerError(messageKey, messageVariables = null) {
+  const error = new Error(messageKey)
+  error.messageKey = messageKey
+  error.messageVariables = messageVariables
+  return error
+}
+
+function prepareOklab(source) {
+  const lab = new Float32Array((source.length / 4) * 3)
+  for (let offset = 0, labOffset = 0; offset < source.length; offset += 4, labOffset += 3) {
+    if (source[offset + 3] === 0) continue
+    const value = rgbToOklab(source[offset], source[offset + 1], source[offset + 2])
+    lab[labOffset] = value.l
+    lab[labOffset + 1] = value.a
+    lab[labOffset + 2] = value.b
+  }
+  return lab
+}
+
+function applyColorKeyPixels(
+  source,
+  color,
+  strength,
+  width,
+  height,
+  preparedLab = null,
+  contiguousOnly = false,
+  despill = false,
+) {
+  const pixels = new Uint8ClampedArray(source)
+  const target = parseHex(color)
+  const targetLab = rgbToOklab(target.red, target.green, target.blue)
+  const targetLinear = {
+    red: srgbByteToLinear(target.red),
+    green: srgbByteToLinear(target.green),
+    blue: srgbByteToLinear(target.blue),
+  }
+  const core = 0.006 + (strength / 100) * 0.19
+  const feather = 0.018 + (strength / 100) * 0.035
+  const spillFeather = feather * 2.6
+  const distances = new Float32Array(pixels.length / 4)
+
+  for (let offset = 0, labOffset = 0, index = 0; offset < pixels.length; offset += 4, labOffset += 3, index += 1) {
+    if (pixels[offset + 3] === 0) continue
+    let lightness
+    let greenRed
+    let blueYellow
+    if (preparedLab) {
+      lightness = preparedLab[labOffset]
+      greenRed = preparedLab[labOffset + 1]
+      blueYellow = preparedLab[labOffset + 2]
+    } else {
+      const lab = rgbToOklab(pixels[offset], pixels[offset + 1], pixels[offset + 2])
+      lightness = lab.l
+      greenRed = lab.a
+      blueYellow = lab.b
+    }
+    const lightnessDelta = lightness - targetLab.l
+    const greenRedDelta = greenRed - targetLab.a
+    const blueYellowDelta = blueYellow - targetLab.b
+    distances[index] = Math.sqrt(
+      lightnessDelta * lightnessDelta +
+      greenRedDelta * greenRedDelta +
+      blueYellowDelta * blueYellowDelta,
+    )
+  }
+  const connected = contiguousOnly
+    ? boundaryConnectedMask(distances, pixels, width, height, core + feather)
+    : null
+
+  for (let offset = 0, index = 0; offset < pixels.length; offset += 4, index += 1) {
+    const originalAlpha = pixels[offset + 3]
+    if (originalAlpha === 0 || (connected && connected[index] === 0)) continue
+    const distance = distances[index]
+    const unit = Math.max(0, Math.min(1, (distance - core) / feather))
+    const remaining = unit * unit * (3 - 2 * unit)
+    const spillUnit = Math.max(0, Math.min(1, (distance - core) / spillFeather))
+    const spillRemaining = spillUnit * spillUnit * (3 - 2 * spillUnit)
+    const outputAlpha = Math.round(originalAlpha * remaining)
+    pixels[offset + 3] = outputAlpha
+    if (outputAlpha === 0) {
+      pixels[offset] = 0
+      pixels[offset + 1] = 0
+      pixels[offset + 2] = 0
+    } else if (despill) {
+      // Alpha feathering alone leaves the outer antialiased pixels fully opaque,
+      // even though their RGB still contains some of the keyed background. Extend
+      // color decontamination beyond the transparency band without changing alpha.
+      const alphaContamination = 1 - remaining
+      const outerContamination = Math.min(0.45, (1 - spillRemaining) * 0.45)
+      const contamination = Math.min(0.96, Math.max(alphaContamination, outerContamination))
+      if (contamination <= 0.001) continue
+      const foregroundShare = 1 - contamination
+      pixels[offset] = linearToSrgbByte(
+        (srgbByteToLinear(pixels[offset]) - contamination * targetLinear.red) / foregroundShare,
+      )
+      pixels[offset + 1] = linearToSrgbByte(
+        (srgbByteToLinear(pixels[offset + 1]) - contamination * targetLinear.green) / foregroundShare,
+      )
+      pixels[offset + 2] = linearToSrgbByte(
+        (srgbByteToLinear(pixels[offset + 2]) - contamination * targetLinear.blue) / foregroundShare,
+      )
+    }
+  }
+  return pixels
+}
+
+function boundaryConnectedMask(distances, pixels, width, height, threshold) {
+  const count = width * height
+  const connected = new Uint8Array(count)
+  const queue = new Int32Array(count)
+  let head = 0
+  let tail = 0
+  const enqueue = (index) => {
+    if (
+      connected[index] !== 0 ||
+      pixels[index * 4 + 3] === 0 ||
+      distances[index] >= threshold
+    ) return
+    connected[index] = 1
+    queue[tail++] = index
+  }
+  for (let x = 0; x < width; x += 1) {
+    enqueue(x)
+    if (height > 1) enqueue((height - 1) * width + x)
+  }
+  for (let y = 1; y < height - 1; y += 1) {
+    enqueue(y * width)
+    if (width > 1) enqueue(y * width + width - 1)
+  }
+  while (head < tail) {
+    const index = queue[head++]
+    const x = index % width
+    const y = Math.floor(index / width)
+    if (x > 0) enqueue(index - 1)
+    if (x + 1 < width) enqueue(index + 1)
+    if (y > 0) enqueue(index - width)
+    if (y + 1 < height) enqueue(index + width)
+  }
+  return connected
+}
+
+function normalizeColor(value) {
+  const color = String(value || '').toLowerCase()
+  if (!/^#[0-9a-f]{6}$/.test(color)) throw workerError('workers.colorKey.invalidColor')
+  return color
+}
+
+function normalizeStrength(value) {
+  const strength = Number(value)
+  if (!Number.isFinite(strength) || strength < 0 || strength > 100) {
+    throw workerError('workers.colorKey.invalidStrength')
+  }
+  return strength
+}
+
+function parseHex(color) {
+  return {
+    red: Number.parseInt(color.slice(1, 3), 16),
+    green: Number.parseInt(color.slice(3, 5), 16),
+    blue: Number.parseInt(color.slice(5, 7), 16),
+  }
+}
+
+function srgbByteToLinear(value) {
+  return linearChannel[value]
+}
+
+function linearToSrgbByte(value) {
+  const channel = Math.max(0, Math.min(1, value))
+  const srgb = channel <= 0.0031308
+    ? channel * 12.92
+    : 1.055 * channel ** (1 / 2.4) - 0.055
+  return Math.round(Math.max(0, Math.min(1, srgb)) * 255)
+}
+
+function rgbToOklab(red, green, blue) {
+  const r = srgbByteToLinear(red)
+  const g = srgbByteToLinear(green)
+  const b = srgbByteToLinear(blue)
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)
+  return {
+    l: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+  }
+}