4

Digamos que eu tenha um código parecido com esse:

<html>
    <head>
        <style>
            .centralizado {
                position: fixed;
                top: 50%; 
                left: 50%; 
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <div>
        <canvas class="centralizado" id="canvas">your browser is nope!</canvas>
    </div>
    <script>
        function init() {
            var ctx = document.getElementById("canvas").getContext('2d');
            ctx.canvas.width  = window.innerWidth;
            ctx.canvas.height = window.innerHeight;
            var pinta = false;
            var red = green = blue = 127;
            var rf = 1, gf = 1, bf = 1;
            var rm = getAleatorio();
            var gm = getAleatorio();
            var bm = getAleatorio();

            function desenha(e) {
                var pos = getPosMouse(canvas, e);
                posx = pos.x;
                posy = pos.y;
                if (pinta) {
                    ctx.fillStyle = "rgb(" + red + ", " + green + ", " + blue + ")";
                    ctx.fillRect(posx-4, posy-4, 8, 8);
                }
            }

            canvas.onmousemove = function(e) {
                desenha(e);
                red += rm * rf;
                green += gm * gf;
                blue += bm * bf;

                if (red >= 255 || red <= 0) { rf *= -1; rm = getAleatorio();}
                if (green >= 255 || green <= 0) { gf *= -1; gm = getAleatorio();}
                if (blue >= 255 || blue <= 0) { bf *= -1; bm = getAleatorio();}

            };

            document.getElementById("canvas").onmousedown = function() {
                pinta = true;
            };

            document.getElementById("canvas").onmouseup = function() {
                pinta = false;
            }

            function getPosMouse(canvas, evt) {
                var rect = canvas.getBoundingClientRect();
                return {
                    x: evt.clientX - rect.left,
                    y: evt.clientY - rect.top
                };
            }

            function getAleatorio() {
                return Math.floor((Math.random() * 5) + 1);
            }
        }
    </script>
    <body onLoad="init();">
</html>

E, assim que disponibilizado no meu servidor, um visitante utilize-o para fazer uma obra prima como essa:

imagem gerada a partir do código

Como eu faço para permitir que o usuário salve o desenho que ele fizer, não localmente, e sim no meu servidor?

1 Resposta 1

6

É possível obtendo a imagem no lado do cliente com JavaScript e enviando ao seu servidor com uma requisição assíncrona (AJAX). Imagine que exista na página um botão Salvar, que quando o usuário pressionar, envia a imagem atual para o servidor e salve-a.

<button id="saveBtn" type="button">Salvar</button>

Podemos adicionar a seguinte função ao evento click do botão:

const saveBtn = document.getElementById("saveBtn");
const canvas = document.getElementById("canvas");

saveBtn.onclick = function (e) {
    var http = new XMLHttpRequest();

    // Converte o canvas para image/png; base64:
    var image = canvas.toDataURL()

    // Define a imagem como valor a ser enviado:
    var params = "image=" + image; 

    http.open("POST", "http://localhost/save", true);
    http.setRequestHeader("Content-type", "text/plain"); // Talvez o Content-type pode ser outro, não tenho certeza quanto a isso

    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            alert("Imagem salvada com sucesso");
        }
    }

    http.send(params);
}

Perceba que neste caso é preciso a referência direta a canvas e não somente ao contexto do mesmo, então você terá que adicionar a seguinte linha ao seu código:

const canvas = document.getElementById("canvas");

Assim, no seu servidor, através da URL http://localhost/save, você receberá a imagem através do valor definido em image, como string, no formato image/png; base64, então basta salvá-la em arquivo.

Você não definiu a linguagem utilizada no servidor, mas a título de exemplo, em PHP ficaria algo como:

$data = $_POST["image"];

list($type, $data) = explode(';', $data);
list($base, $data) = explode(',', $data);

$data = base64_decode($data);

file_put_contents('/tmp/image.png', $data);

Criando a imagem /tmp/image.png com o conteúdo do canvas.

1
  • ao salvar o png ele vem com o fundo transparente. sabe me dizer como salvar com o fundo branco? Alterei para jpg e não foi. 27/01/2020 às 15:07

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 .