Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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();
});
};Carregando comentários...