Rotacionar Imagens com um botão

Suporte
, ,
1

Boa tarde, tudo certo?

Gostaria de saber se existe alguma forma de rotacionar uma imagem que está em ImageView em 90º? Existe algum JS pra isso?

2

Olá @JonasKRitter!

Para rotacionar uma imagem, basta usar o código abaixo em um Arquivo CSS do Formulário, substituindo "foto" pelo nome do seu campo Image View:

div.fieldWrapper[data-field-name="foto"] img {
    transform: rotate(90deg);
}

Veja o resultado abaixo:

image
imagem original297×313 39.8 KB
image
imagem com rotação 90º300×313 34 KB

Se você quiser rotacionar 90º a cada clique de um botão, terá que criar uma classe CSS para cada passo da rotação, assim:

.rotacao-90  { transform: rotate(90deg);  }
.rotacao-180 { transform: rotate(180deg); }
.rotacao-270 { transform: rotate(270deg); }

E então, adicionar este código na ação Executar Código JavaScript, no Procedimento associado ao evento Click do botão:

// Localiza o elemento
const img = document.querySelector('div.fieldWrapper[data-field-name="foto"] img');

// Rotaciona a imagem 90º à direita
if (img) { 

    let className = img.className;
    
    if (!className) {
        // Começa com 90º 
        className = 'rotacao-90';
    }
    else {
        // Extrai a quantidade de graus do nome da classe
        let graus = parseInt(className.split('-')[1]);
        
        // Aumenta 90º 
        graus+=90;
        
        // Se chegou a 360º, zera
        if (graus === 360) className = '';
        // Senão, atualiza o nome da classe
        else className = 'rotacao-'+graus;
    }
    // Aplica a rotação através da classe CSS
    img.className = className;
}
3

A rotação está funcionando. Porém quando a imagem está em 90º, ela fica cortada:

image
image872×853 87.9 KB

Ela carrega assim:

image
image1326×859 138 KB

No campo ImageView estou usando a opçaõ de redimensionar a imagem

4

Olá @JonasKRitter!

Poderia verificar alterar o código Javascript para:

// Localiza o elemento
const img = document.querySelector('div.fieldWrapper[data-field-name="foto"]');

// Rotaciona a imagem 90º à direita
if (img) { 

    let oldClassName = newClassName = img.classList.values().filter(c => c?.startsWith('rotacao')).toArray()[0];
    
    if (!oldClassName) {
        // Começa com 90º 
        newClassName = 'rotacao-90';
    }
    else {
        // Extrai a quantidade de graus do nome da classe
        let graus = parseInt(oldClassName.split('-')[1]);
        
        // Aumenta 90º 
        graus+=90;
        
        // Se chegou a 360º, zera
        if (graus === 360) newClassName = undefined;
        // Senão, atualiza o nome da classe
        else newClassName = 'rotacao-'+graus;
    }
    
    // Aplica a rotação através da classe CSS
    img.classList.remove(oldClassName);
    if (newClassName)
        img.classList.add(newClassName);
}
5

Deu certo agora! Obrigado pelo apoio