2 Crop Example - JS Fiddle

[orion3dgames]

Hi there,

Seems to be alot of people struggling to crop images using canva, and just wanted to share my 2 solutions

LIMITATIONS:

• Only square cropping will work
• Rotation does not work

VERSION 1 (moving the crop area)

https://jsfiddle.net/oriongu/f2yv3r7u/11/

• Double click image to start the cropping process
• Move/Scale cropping area while preventing crop area to to leave image area
• Deselect crop area to finalize image cropping

VERSION 2 (moving the image)

https://jsfiddle.net/oriongu/0ogmnrwd/107/

• Double click image to start the cropping process
• Move/Scale image while preventing image to leave crop area
• Deselect image to finalize cropping

[diegosystem32]

Olá,

Parece que muitas pessoas estão tendo dificuldades para cortar imagens usando o Canva e só queria compartilhar minhas 2 soluções

LIMITAÇÕES:

• Somente o corte quadrado funcionará
• A rotação não funciona

VERSÃO 1 (movendo a área de corte)

https://jsfiddle.net/oriongu/f2yv3r7u/11/

• Clique duas vezes na imagem para iniciar o processo de corte
• Mover/dimensionar a área de corte, evitando que a área de corte saia da área da imagem
• Desmarque a área de corte para finalizar o corte da imagem

VERSÃO 2 (movendo a imagem)

https://jsfiddle.net/oriongu/0ogmnrwd/107/

• Clique duas vezes na imagem para iniciar o processo de corte
• Mover/dimensionar imagem evitando que ela saia da área de corte
• Desmarque a imagem para finalizar o corte

It works, but only with the image at angle 0, what would it be like considering the rotated image?