Function applyBiLevelEffect

apps/sim/lib/pptx-renderer/renderer/image-renderer.ts:620–656

* Apply a bi-level (threshold) effect to an image. * * OOXML ` ` converts the image to black and white. * Each pixel's luminance is compared to the threshold (0–100000 = 0–100%). * Pixels above become white, pixels below become black. Alpha is preserved.

(biLevel: SafeXmlNode, img: HTMLImageElement)

 * Pixels above become white, pixels below become black. Alpha is preserved.
 */
function applyBiLevelEffect(biLevel: SafeXmlNode, img: HTMLImageElement): void {
  const thresh = (biLevel.numAttr('thresh') ?? 50000) / 100000 // 0–1

  const apply = () => {
    const w = img.naturalWidth
    const h = img.naturalHeight
    if (!w || !h) return

    const canvas = document.createElement('canvas')
    canvas.width = w
    canvas.height = h
    const c = canvas.getContext('2d')
    if (!c) return

    c.drawImage(img, 0, 0)
    const imageData = c.getImageData(0, 0, w, h)
    const data = imageData.data

    for (let i = 0; i < data.length; i += 4) {
      const gray = (0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2]) / 255
      const val = gray >= thresh ? 255 : 0
      data[i] = val
      data[i + 1] = val
      data[i + 2] = val
      // Alpha preserved
    }

    c.putImageData(imageData, 0, 0)
    img.src = canvas.toDataURL()
  }

  if (img.complete && img.naturalWidth) {
    apply()
  } else {
    img.addEventListener('load', apply, { once: true })
  }
}