0

Olá preciso fazer um upload onde, na imagem, o cliente poderá adicionar um elemento visual para demarcar algo. Precisarei de algo via javascript para fazer a interação visual antes do upload(parte mais simples).

Alguém sabe como fazer isso?

Por exemplo, na imagem abaixo eu peguei a foto de um quarto qualquer e adicionei uma seta apontando para um elemento do quarto. Isso é o que eu preciso fazer, alguém pode me ajudar?

inserir a descrição da imagem aqui

[Atualização]

Baseado na solução porposta por algumas pessoas, inclusive pelo Valdir Psr que mandou uma ótima solução, pesquisando um pouco mais encontrei uma lib chamada Fabric.js e consegui fazer uma implementação que considerei mais simples.

[Solução]

Para quem interessar segue o projeto exemplo que criei no github: https://github.com/alessandrosales/image-editor

1 Resposta 1

1

Uma das formas de fazer isso é utilizando canvas e os eventos de Drag And Drop, nativos, do HTML5.

Demonstração
Download do Projeto

Arrastando e soltando um objeto na tela

Para utilizar a opção draggable é bastante simples. Basta definir o atributo draggable="true" no elemento que será arrastado. No caso a seta.

<div id="img">
    <img id="main" src="http://via.placeholder.com/350x350?text=Clique+para+carregar+uma+imagem" />
    <img id="arrow" draggable="true" src="arrow.png" />
    <canvas style="display:none"></canvas>
</div>

Agora só precisamos capturar o valor da posição em relação ao elemento.

Na função ondragstart, nós capturamos de onde o elemento "partiu".

imgArrow.addEventListener("dragstart", (ev) => {
    /* Capturamos o valor da propriedade `left` e `top` do CSS */
    let left = ev.target.style.getPropertyValue("left") || 0;
    let top = ev.target.style.getPropertyValue("top") || 0;

    /* Subtraímos a posição do elemento em relação a posição dele na tela e salvamos para consultar posteriormente. */
    ev.dataTransfer.setData("left", parseInt(left) - ev.clientX);
    ev.dataTransfer.setData("top", parseInt(top) - ev.clientY);
});

Na função ondragover, nós validamos a ação drop.

imgArea.addEventListener("dragover", (ev) => {
    ev.preventDefault();
    return false;
});

Na função ondrop, nós iremos capturar a posição x e y de onde o objeto foi soltado e iremos capturar os valores setados anteriormente para calcular a nova posição do objeto.

imgArea.addEventListener("drop", (ev) => {
    /* Capturamos os valores "x" e "y" setado anteriormente */
    let left = ev.dataTransfer.getData("left") || 0;
    let top = ev.dataTransfer.getData("top") || 0;

    /* Somamos o valor setado anteriormente com a nova posição do objeto em relação a tela */
    imgArrow.style.left = parseInt(left) + ev.clientX;
    imgArrow.style.top = parseInt(top) + ev.clientY;
});

Pronto! Já temos o efeito de arrastar e soltar a seta.

Salvando a nova imagem.

Agora vamos trabalhar com o canvas para manipular nossa nova imagem. Para isso nós iremos utilizar apenas o context e o método drawImage do elemento citado.

/* Aqui setamos a largura e altura do canvas */
this.canvas.width = imgMain.width;
this.canvas.height = imgMain.height;

/* Capturamos o contexto */
let ctx = this.canvas.getContext("2d");

/*
 * Aqui nós desenhamos a imagem principal no canvas.
 * Adiciona a imagem na posição x=0 e y=0 juntamente 
 * com a largura e altura da imagem
 */
ctx.drawImage(imgMain, 0, 0, imgMain.width, imgMain.height)

/*
 * Aqui nós desenhamos a seta no canvas.
 * Adiciona a imagem na posição definidos no `css` (left e top)
 * juntamente com a largura e altura da imagem
 */
ctx.drawImage(imgArrow, parseInt(imgArrow.style.left), parseInt(imgArrow.style.top), imgArrow.width, imgArrow.height);

Pronto. Finalizado mais uma parte.

Enviando a imagem para o servidor.

Nesse último passo também não há dor de cabeça. Basta utilizarmos o método toBlob para capturar o arquivo e XHR para enviarmos para o servidor.

canvas.toBlob(blob => {
    let form = new FormData();
    form.append("file", blob);

    let xhr = new XMLHttpRequest();
    xhr.onload = function(result) { alert( result.target.responseText ); }
    xhr.open("POST", "upload.php", true);
    xhr.send(form);
});

Facilitando as coisas

Bem, eu acabei fazendo uma classe bem simples. Basta baixa no link de download e utilizar da seguinte forma:

const imgArea = document.querySelector("#img");
const imgMain = document.querySelector("#img #main");
const imgArrow = document.querySelector("#img #arrow");
const btnDownload = document.querySelector("#btnDownload");

new DragAndDrop(imgArea, imgMain, imgArrow, {
    arrowHeight: 100, //Altura da seta
    arrowWidth: 100,  //Largura da seta
    btnDownload: btnDownload,  //Botão de Download

    //Eventos
    dragStart: () => {
        console.log("Start");
    },
    dragOver: () => {
        console.log("Over");
    },
    dragDrop: () => {
        console.log("Drop")
    }
});

Demonstração
Download do Projeto

3

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .