zumerlab
diff --git a/‎__tests__/snapdom.backgroundColor.test.js‎
Lines changed: 44 additions & 0 deletions b/‎__tests__/snapdom.backgroundColor.test.js‎
Lines changed: 44 additions & 0 deletions
diff --git a/‎src/api/snapdom.js‎
Lines changed: 10 additions & 2 deletions b/‎src/api/snapdom.js‎
Lines changed: 10 additions & 2 deletions
@@ -40,3 +40,47 @@ describe('snapdom.toJpg backgroundColor option', () => {
  expect(pixel[2]).toBeLessThan(30) // blue
  })
 })
+
+describe('lossy format flattening at export time (no format on capture)', () => {
+ let container
+
+ beforeEach(() => {
+ container = document.createElement('div')
+ container.style.width = '100px'
+ container.style.height = '100px'
+ container.style.background = 'transparent'
+ document.body.appendChild(container)
+ })
+
+ // The capture has no `format` (defaults to png, backgroundColor null). The lossy
+ // format is requested only at export time via the result helper. White must still
+ // be flattened in, otherwise JPEG encodes the transparent area as black.
+ it('result.toBlob({ type: "jpeg" }) flattens white instead of black', async () => {
+ const result = await snapdom(container)
+ const blob = await result.toBlob({ type: 'jpeg' })
+ expect(blob.type).toBe('image/jpeg')
+ const img = new Image()
+ img.src = URL.createObjectURL(blob)
+ await img.decode()
+ const canvas = document.createElement('canvas')
+ canvas.width = img.naturalWidth
+ canvas.height = img.naturalHeight
+ const ctx = canvas.getContext('2d')
+ ctx.drawImage(img, 0, 0)
+ const pixel = ctx.getImageData(0, 0, 1, 1).data
+ expect(pixel[0]).toBeGreaterThan(240)
+ expect(pixel[1]).toBeGreaterThan(240)
+ expect(pixel[2]).toBeGreaterThan(240)
+ })
+
+ it('result.toCanvas({ format: "jpeg" }) flattens white instead of leaving transparent', async () => {
+ const result = await snapdom(container)
+ const canvas = await result.toCanvas({ format: 'jpeg' })
+ const ctx = canvas.getContext('2d')
+ const pixel = ctx.getImageData(0, 0, 1, 1).data
+ expect(pixel[3]).toBe(255) // opaque
+ expect(pixel[0]).toBeGreaterThan(240) // white
+ expect(pixel[1]).toBeGreaterThan(240)
+ expect(pixel[2]).toBeGreaterThan(240)
+ })
+})
@@ -157,10 +157,18 @@ snapdom.capture = async (el, context, _token) => {
  exportsMap.jpg = (ctx, opts) => exportsMap.jpeg(ctx, opts)
  }
 
- // —— Normalizador para opciones por tipo (p.ej. JPEG: fondo blanco) ——
+ // —— Normalizador para opciones por tipo (p.ej. JPEG/WebP: fondo blanco) ——
  function normalizeExportOptions(type, opts) {
  const next = { ...context, ...(opts || {}) }
- if (type === 'jpeg' || type === 'jpg') {
+ // `type` aquí es el NOMBRE del export ('blob'/'canvas'/'download'/'jpeg'/…), no el formato
+ // de imagen: en toBlob/toCanvas/download el formato viaja en opts.format/opts.type. Resolver
+ // el formato real (jpg→jpeg) para aplanar el fondo igual que createContext (context.js:84),
+ // o JPEG codificaría las zonas transparentes en negro.
+ const lossy = (s) => s === 'jpeg' || s === 'jpg' || s === 'webp'
+ const fmt = [type, next.format, next.type]
+ .map(v => (typeof v === 'string' ? v.toLowerCase() : ''))
+ .find(lossy)
+ if (fmt) {
  const noBg = next.backgroundColor == null || next.backgroundColor === 'transparent'
  if (noBg) next.backgroundColor = '#ffffff'
  }