Evaluando propuestas

Estruturação de editor de imagem javascript

Publicado el 16 Marzo, 2021 en Programación y Tecnología

Sobre este proyecto

Abierto

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.

Categoría Programación y Tecnología
Subcategoría Programación Web
¿Cuál es el alcance del proyecto? Bug o cambio pequeño
¿Es un proyecto o una posición? Un proyecto
Actualmente tengo Tengo las especificaciones
Disponibilidad requerida Según se necesite
Integraciones de API Otros (Otras APIs)
Roles necesarios Programador

Plazo de Entrega: No definido

Habilidades necesarias

Otros proyectos publicados por L. B. R.