Componente Jacaré

Use o Pixu com Jacaré via um componente .jcr reutilizável — reatividade fina, sem Virtual DOM.

Demo ao vivo

Jacaré component API — live demo

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

Try a sample image

Instalação

npm install @pantanal/pixu @jacare/core

Use @jacare/vite-plugin (ou a CLI do Jacaré) para compilar arquivos .jcr.

Basic usage

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

const options = {
  format: 'image/pixu',
  enableSmartQuality: true,
  quality: 0.85,
}

function onCompress(result) {
  console.log('Compressed:', result)
}

function onError(error) {
  console.error(error)
}

export <view>
  <PixuCompressor
    :instanceId=${'demo'}
    :options=${options}
    on-compress=${onCompress}
    on-error=${onError}
  />
</view>

Props

options

Type: CompressionOptions (object)

Opções de compressão. Veja CompressionOptions.

const options = {
  format: 'image/pixu',
  enableSmartQuality: true,
  maxWidth: 1920,
  maxHeight: 1080,
  stripMetadata: true,
}

samples

Type: { id: string; label: string; url: string; file: string }[]

Miniaturas de exemplo opcionais na área de upload.

const samples = [
  { id: 'landscape', label: 'Mountains', url: '/photo-landscape.jpg', file: 'photo-landscape.jpg' },
]

export <view>
  <PixuCompressor :options=${options} :samples=${samples} />
</view>

autoCompress

Type: boolean · Default: true

Quando false, selecionar um arquivo só gera preview (sem comprimir até você conectar o fluxo).

instanceId

Type: string · Default: 'default'

Id único por compressor montado. Obrigatório quando várias instâncias de PixuCompressor compartilham a página, para cada uma manter o próprio estado de arquivo/resultado.

Emits

Event	Payload	When
compress	CompressionResult	Compression succeeded
error	Error	Compression failed
progress	number (0–1)	Progress updates

<PixuCompressor
  :options=${options}
  on-compress=${onCompress}
  on-error=${onError}
  on-progress=${onProgress}
/>

Contrato

O componente declara um contrato de template Jacaré:

export <contract>
  props: {
    options: { type: 'object', default: {} }
    samples: { type: 'any', default: [] }
    autoCompress: { type: 'boolean', default: true }
  }
  emits: ['compress', 'error', 'progress']
</contract>

Exemplo completo

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

http://localhost:3003 — uses components/jacare/PixuCompressor.jcr.

Exemplo Jacaré →

Caminho de importação

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

Ou caminho relativo a partir do seu app:

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

Melhor compressão

const options = {
  format: 'image/pixu',
  enableSmartQuality: true,
  stripMetadata: true,
}

See Formato PIXU and TECR.