Salvar imagem no servidor utilizando JavaScript

jadergfarinon · Fevereiro 4, 2019

Bom dia pessoal, não sei quase nada de JavaScript e não consegui encontrar nada relacionado com o que eu preciso então desculpa se eu sair com alguma pergunta idiota aqui, bom... eu tenho um Mini Paint rodando aqui na empresa, o script não foi feito por mim, já estava rodando quando eu entrei e provavelmente foi pego na internet, bom, é uma tela em branco na qual é possível desenhar, seja com o mouse ou com o dedo na tela do celular, tem também dois botões, um para limpar a tela e outro para salvar, quando clicamos em salvar ele exibe um prompt para digitar um nome e salva o desenho em png localmente na máquina como um download, porem estou precisando modificar para que esse arquivo seja salvo em uma pasta no próprio servidor em que o script está rodando, esse servidor fica aqui na minha rede então poderia ser direto pelo script no webserver através de um endereço estilo localhost ou por um caminho estilo \\servidor\pasta_imagens que enviaria para uma pasta compartilhada no servidor aonde o site está rodando mas não faço idéia de como modificar o java script para isso, seguem os códigos, se alguém puder me ajudar agradeço muito

HTML (index.html)

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Teste</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<div class="left-block">
  <div class="colors">
  </div>
  <div class="brushes">
  </div>
  <div class="buttons">
    <button id="clear" type="button">Limpar</button>
    <button id="save" type="button">Salvar</button>
  </div>
</div>
<div class="right-block">
  <canvas id="paint-canvas" width="640" height="400"></canvas>
</div>
</main>
<script  src="js/index.js"></script>
</body>
</html>

css(css/style.css)


* {
  box-sizing: border-box;
}

main {
  width: 800px;
  border: 1px solid #e0e0e0;
  margin: 0 auto;
  display: flex;
  flex-grow: 1;
}

.left-block {
  width: 160px;
  border-right: 1px solid #e0e0e0;
}

.colors {
  background-color: #ece8e8;
  text-align: center;
  padding-bottom: 5px;
  padding-top: 10px;
}

.colors button {
  display: inline-block;
  border: 1px solid #00000026;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin-bottom: 5px
}

.colors button:nth-of-type(1) {
  background-color: #0000ff;
}

.colors button:nth-of-type(2) {
  background-color: #009fff;
}

.colors button:nth-of-type(3) {
  background-color: #0fffff;
}

.colors button:nth-of-type(4) {
  background-color: #bfffff;
}

.colors button:nth-of-type(5) {
  background-color: #000000;
}

.colors button:nth-of-type(6) {
  background-color: #333333;
}

.colors button:nth-of-type(7) {
  background-color: #666666;
}

.colors button:nth-of-type(8) {
  background-color: #999999;
}

.colors button:nth-of-type(9) {
  background-color: #ffcc66;
}

.colors button:nth-of-type(10) {
  background-color: #ffcc00;
}

.colors button:nth-of-type(11) {
  background-color: #ffff00;
}

.colors button:nth-of-type(12) {
  background-color: #ffff99;
}

.colors button:nth-of-type(13) {
  background-color: #003300;
}

.colors button:nth-of-type(14) {
  background-color: #555000;
}

.colors button:nth-of-type(15) {
  background-color: #00ff00;
}

.colors button:nth-of-type(16) {
  background-color: #99ff99;
}

.colors button:nth-of-type(17) {
  background-color: #f00000;
}

.colors button:nth-of-type(18) {
  background-color: #ff6600;
}

.colors button:nth-of-type(19) {
  background-color: #ff9933;
}

.colors button:nth-of-type(20) {
  background-color: #f5deb3;
}

.colors button:nth-of-type(21) {
  background-color: #330000;
}

.colors button:nth-of-type(22) {
  background-color: #663300;
}

.colors button:nth-of-type(23) {
  background-color: #cc6600;
}

.colors button:nth-of-type(24) {
  background-color: #deb887;
}

.colors button:nth-of-type(25) {
  background-color: #aa0fff;
}

.colors button:nth-of-type(26) {
  background-color: #cc66cc;
}

.colors button:nth-of-type(27) {
  background-color: #ff66ff;
}

.colors button:nth-of-type(28) {
  background-color: #ff99ff;
}

.colors button:nth-of-type(29) {
  background-color: #e8c4e8;
}

.colors button:nth-of-type(30) {
  background-color: #ffffff;
}

.brushes {
  //background-color: purple;
  padding-top: 5px
}

.brushes button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background-color: #ece8e8;
  margin-bottom: 5px;
  padding: 5px;
  height: 30px;
  outline: none;
  position: relative;
  cursor: pointer;
}

.brushes button:after {
  height: 1px;
  display: block;
  background: #808080;
  content: '';
}

.brushes button:nth-of-type(1):after {
  height: 1px;
}

.brushes button:nth-of-type(2):after {
  height: 2px;
}

.brushes button:nth-of-type(3):after {
  height: 3px;
}

.brushes button:nth-of-type(4):after {
  height: 4px;
}

.brushes button:nth-of-type(5):after {
  height: 5px;
}

.buttons {
  height: 80px;
  padding-top: 10px;
}

.buttons button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background-color: #ece8e8;
  margin-bottom: 5px;
  padding: 5px;
  height: 30px;
  outline: none;
  position: relative;
  cursor: pointer;
  font-size: 16px;
}

.right-block {
  width: 640px
  height:100vh;
}

#paint-canvas {
  cursor:crosshair;
}

JavaScript (js/index.js)

window.onload = function () {

  // Definitions
  var canvas = document.getElementById("paint-canvas");
  var context = canvas.getContext("2d");
  var boundings = canvas.getBoundingClientRect();

  // Specifications
  var mouseX = 0;
  var mouseY = 0;
  context.strokeStyle = 'black'; // initial brush color
  context.lineWidth = 1; // initial brush width
  var isDrawing = false;


  // Handle Colors
  var colors = document.getElementsByClassName('colors')[0];

  colors.addEventListener('click', function(event) {
    context.strokeStyle = event.target.value || 'black';
  });

  // Handle Brushes
  var brushes = document.getElementsByClassName('brushes')[0];

  brushes.addEventListener('click', function(event) {
    context.lineWidth = event.target.value || 1;
  });

  // Mouse Down Event
  canvas.addEventListener('mousedown', function(event) {
    setMouseCoordinates(event);
    isDrawing = true;

    // Start Drawing
    context.beginPath();
    context.moveTo(mouseX, mouseY);
  });

  // Mouse Move Event
  canvas.addEventListener('mousemove', function(event) {
    setMouseCoordinates(event);

    if(isDrawing){
      context.lineTo(mouseX, mouseY);
      context.stroke();
    }
  });

  // Mouse Up Event
  canvas.addEventListener('mouseup', function(event) {
    setMouseCoordinates(event);
    isDrawing = false;
  });

  // Handle Mouse Coordinates
  function setMouseCoordinates(event) {
    mouseX = event.clientX - boundings.left;
    mouseY = event.clientY - boundings.top;
  }

  // Handle Clear Button
  var clearButton = document.getElementById('clear');

  clearButton.addEventListener('click', function() {
    context.clearRect(0, 0, canvas.width, canvas.height);
  });

  // Handle Save Button
  var saveButton = document.getElementById('save');

  saveButton.addEventListener('click', function() {
    var imageName = prompt('Digite o Número da movimentação.');
    var canvasDataURL = canvas.toDataURL();
    var a = document.createElement('a');
    a.href = canvasDataURL;
    a.download = imageName || 'drawing';
    a.click();
  });
};

Entrar

Arquivado

Salvar imagem no servidor utilizando JavaScript

Recommended Posts

jadergfarinon 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Abrir url na mesma janela

Sistema de Login

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante