ImageCropper

src/components/image-cropper/ImageCropper.vue

Form Medium 2 usos

Recortador de imagens com upload automático. Usa vue-advanced-cropper para interface de recorte e axios para enviar o resultado como PNG para a API de upload. Suporta stencil retangular (padrão) ou circular. O pai apenas reage ao @on-cropp-image com a URL da imagem recortada já salva.

Stencil Retangular (padrão)

Recorte livre com stencil retangular — default quando stencil não é passado. Grade interna de terços (regra dos terços). Bordas e handles de canto brancos. Usado para recorte de imagens de estoque em ViewStockImages.

<vs-popup
  ref="popup-cropper"
  class="chat-upload-image-popup"
  title="Adicionar imagem"
  :active.sync="activeCrop"
  v-on:close="closeCrop"
>
  <image-cropper
    :src="imageUrl"
    @on-cropp-image="imageCropped"
  ></image-cropper>
</vs-popup>

Stencil Circular (avatar / foto de perfil)

stencil="circle-stencil" para recorte de foto de perfil — padrão em instâncias WhatsApp. Área fora do círculo fica escurecida. Usado em EditInstance.vue para foto de perfil da instância.

<vs-popup
  ref="popup-cropper"
  class="profile-image-popup"
  title="Alterar Foto"
  :active.sync="profilePresets.picture.crop"
  v-on:close="profilePresets.picture.crop = false"
>
  <image-cropper
    :src="profilePresets.picture.imageUrl"
    stencil="circle-stencil"
    @on-cropp-image="imageCropped"
  ></image-cropper>
</vs-popup>

API

Exemplo completo

<!-- src: URL da imagem a recortar (obrigatório) -->
<!-- stencil: 'rectangle-stencil' (default) ou 'circle-stencil' -->
<!-- @on-cropp-image: AxiosResponse — response.data.fileUrl contém a URL da imagem recortada salva -->
<!-- O componente faz o upload automaticamente ao clicar Salvar — não precisa de action/headers -->
<image-cropper
  :src="imageUrl"
  stencil="circle-stencil"
  minWidth="100"
  minHeight="100"
  @on-cropp-image="imageCropped"
></image-cropper>

Props

Nome	Tipo	Default	Obrig.	Descrição
`src`	Any	—	Sim	URL da imagem a ser recortada. Passada diretamente para o Cropper.
`stencil`	String	`'rectangle-stencil'`	Não	Tipo de stencil. Valores: `'rectangle-stencil'` ou `'circle-stencil'`.
`minWidth`	String	`'50'`	Não	Largura mínima do recorte em pixels.
`minHeight`	String	`'50'`	Não	Altura mínima do recorte em pixels.
`styleRatio`	String	`'1'`	Não	Declarado mas não usado no template. Reservado para aspect ratio.

Eventos

Evento	Payload	Descrição
`@on-cropp-image`	AxiosResponse	Emitido após upload bem-sucedido. `response.data.fileUrl` contém a URL da imagem recortada já salva no servidor.

Comportamento de upload

Aspecto	Valor
Endpoint	`localStorage.getItem('baseUrl') + '/api/file/upload'`
Auth	Bearer token do `Vuex state.auth.bearer`
Formato	`canvas.toBlob → File('image.png') → FormData campo 'file'`
Bloqueio	Botão "Enviando..." por 10 segundos máx após clicar Salvar

Dependências

vue-advanced-cropper — Cropper + vue-advanced-cropper/dist/style.css
axios — upload da imagem recortada
vs-button (Vuesax 3) — botão Salvar

Onde é usado

src/components/stock-image-card/ViewStockImages.vue — recorte retangular para imagens de estoque
src/views/instances/EditInstance.vue — recorte circular para foto de perfil de instância

Padrão de uso: sempre dentro de vs-popup com :active.sync. Fluxo: (1) usuário seleciona imagem → URL salva em imageUrl; (2) popup abre com ImageCropper passando :src="imageUrl"; (3) usuário recorta e clica Salvar → @on-cropp-image retorna a URL da imagem recortada já persistida.