Exemplos Jacaré

Mesmo layout da documentação deste site. Demo ao vivo de compress() abaixo; playground .jcr em examples/jacare/.

Demo ao vivo

Jacaré component API — live demo

Same compress() used by PixuCompressor.jcr. Pick a sample or upload.

Try a sample image

Executar o projeto

npm run build
cd examples/jacare && npm install && npm run dev

Abra http://localhost:3003 — usa components/jacare/PixuCompressor.jcr.

Componente

import PixuCompressor from 'pixu/components/jacare/PixuCompressor.jcr'

export <view>
  <PixuCompressor
    :options=${{ format: 'image/pixu', enableSmartQuality: true }}
    :samples=${samples}
    on-compress=${onCompress}
  />
</view>

Guia do componente Jacaré →

Stack

Pacote	Função
@jacare/core	Signals (pulse, derive), bindings de DOM
@jacare/vite-plugin	Compila templates .jcr no build
pixu	compress, buildDownloadName

Importar o Pixu

import { pulse, derive } from '@jacare/core'
import { compress, buildDownloadName } from '@pantanal/pixu'

const quality = pulse(0.85)
const format = pulse('image/pixu')

async function onFileChange(e) {
  const file = e.target.files?.[0]
  if (!file) return

  const result = await compress(file, {
    quality: quality(),
    format: format(),
    stripMetadata: true,
    enableSmartQuality: true,
    onProgress: (p) => progress.set(p),
  })

  console.log(result.compressionRatio)
  console.log(buildDownloadName('out', 'image/webp')) // "out.webp"
}

Template (.jcr)

export <view>
  <main>
    <img src="/logo.png" alt="Pixu" />
    <input type="file" accept="image/*" on-change=${onFileChange} />
    <select bind-value=${format}>
      <option value="auto">Auto (prefers PIX)</option>
      <option value="image/jpeg">JPEG</option>
      <option value="image/webp">WebP</option>
      <option value="image/pixu">PIXU (Best)</option>
    </select>
    #if result()
      <button type="button" on-click=${downloadCompressed}>Download</button>
    #end
  </main>
</view>

Imagens de exemplo

A demo inclui uma galeria de fotos reais em public/:

• photo-landscape.jpg, photo-portrait.jpg, photo-city.jpg
• photo-nature.jpg, photo-food.jpg, graphic-transparent.png

Clique em qualquer amostra para comprimir na hora — sem precisar fazer upload.

Tema da marca

Roxo #7b3fef e ciano #00ccff da logo Pixu. Estilos compartilhados: examples/shared/theme.css.

Estrutura do projeto

examples/jacare/
  src/
    app.jcr      # UI + compression logic
    app.css      # Theme imports
    boot.js      # Mount entry
  public/        # logo + sample images
  vite.config.js # pixu alias + jacare plugin
  package.json

Validar templates

npm run check

Aprender Jacaré

• Jacaré GitHub
• Jacaré Lab tutorial
• API reference

Veja também

• Todos os exemplos de frameworks
• Formato PIXU
• API: compress()