Teste

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) ``` Teste

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(); }); }; ```

jadergfarinon

Salvar imagem no servidor utilizando JavaScript