Atualmente estamos utilizando uma ferramenta que tem como base o
Cropper.js.
A ferramenta que estamos usando como base pode ser encontrada no link a seguir:
https://github.com/fengyuanchen/photo-editor.
Acontece que estamos enfrentando alguns problemas com relação a como o
Cropper.js e ao palco de trabalho gerado por ele após o upload das imagens.
O
Cropper.js calcula o palco de trabalho com base nas dimensões da imagem que é carregada nele, o que faz
o palco variar. Quando uma imagem pequena é enviada, fica quase impossível de se trabalhar.
Por isso preciso que o tamanho do palco de trabalho tenha sempre uma dimensão fixa de 1200x600.
Se a imagem que for enviada for maior que o palco de trabalho, a imagem deverá ser ajustada proporcionalmente para caber no palco.
Se a imagem for menor, não deve ser feito nada com relação à proporção da imagem, a mesma deverá ficar do tamanho que ele for enviada.
Vou precisar que o editor tenha 3 canvas de cortes diferentes, nas seguintes dimensões:
- 400x400 - É uma imagem de perfil
- 640x170 - Imagem de logotipo
- 920x435 - Imagem de capa
Essas áreas de cortes deverão ser carregadas no momento que o editor for carregado, as 3 não devem estar juntas ao mesmo tempo.
No sistema o usuário terá áreas diferentes para cada uma dessas imagens, assim sendo preciso que o canva de corte seja relacionado com a área em que o usuário irá fazer o upload da imagem.
Os canvas de cortes devem ser possíveis de serem redimensionados proporcionalmente, tanto para mais quanto para menos, o redimensionamento não deverá permitir o usuário alterar a proporção do corte.
Após o usuário realizar o corte da imagem de acordo com as áreas de corte estabelecidas, o editor deve ser capaz de enviar os dados via chamada ajax para uma api php.
No momento estamos utilizando o upload via Cropper no tipo Blob, para podermos trabalhar a imagem no backend.
Durante o upload deverá ser exibido uma barra de progresso informando o usuário o percentual do upload da imagem que ele está enviando.
As opções que deverão constar no editor serão:
- Zoom In
- Zoom out
- Girar para a esquerda
- Girar para a direita
- Flip vertical
- Flip horizontal
- Recortar
- Desfazer
- Substituir (Reseta o editor e permite selecionar outra imagem)
- Salvar
Em anexo está o visual do que é esperado para o editor.
Prazo de Entrega: Não estabelecido