Ir para conteúdo
jadergfarinon

Salvar imagem em diretório específico

Recommended Posts

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, o script não foi feito por mim, já estava rodando aqui na empresa 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 o nome e salva o desenho em png, bom, hoje ele salva na máquina em um local de acordo com a configuração do navegador utilizado, porem estou precisando modificar para que esse arquivo seja enviado para o 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">
    <!--Cores não utilizadas-->
    <!-- <button type="button" value="#0000ff"></button>
    <button type="button" value="#009fff"></button>
    <button type="button" value="#0fffff"></button>
    <button type="button" value="#bfffff"></button>
    <button type="button" value="#000000"></button>
    <button type="button" value="#333333"></button>
    <button type="button" value="#666666"></button>
    <button type="button" value="#999999"></button>
    <button type="button" value="#ffcc66"></button>
    <button type="button" value="#ffcc00"></button>
    <button type="button" value="#ffff00"></button>
    <button type="button" value="#ffff99"></button>
    <button type="button" value="#003300"></button>
    <button type="button" value="#555000"></button>
    <button type="button" value="#00ff00"></button>
    <button type="button" value="#99ff99"></button>
    <button type="button" value="#f00000"></button>
    <button type="button" value="#ff6600"></button>
    <button type="button" value="#ff9933"></button>
    <button type="button" value="#f5deb3"></button>
    <button type="button" value="#330000"></button>
    <button type="button" value="#663300"></button>
    <button type="button" value="#cc6600"></button>
    <button type="button" value="#deb887"></button>
    <button type="button" value="#aa0fff"></button>
    <button type="button" value="#cc66cc"></button>
    <button type="button" value="#ff66ff"></button>
    <button type="button" value="#ff99ff"></button>
    <button type="button" value="#e8c4e8"></button>
    <button type="button" value="#ffffff"></button> -->
  </div>
  <div class="brushes">
     <!--Espessura da linha não utilizada-->
    <!-- <button type="button" value="1"></button>
    <button type="button" value="2"></button>
    <button type="button" value="3"></button>
    <button type="button" value="4"></button>
    <button type="button" value="5"></button> -->
  </div>
  <!--Botões-->
  <div class="buttons">
    <button id="clear" type="button">Limpar</button>
    <button id="save" type="button">Salvar</button>
  </div>
</div>
<!--Tamanho do quadro-->
<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();
  });
};

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Pedro0069
      Bom dia Pessoal,

      Estou estudando Java e estou com algumas dúvidas muito simples pra quem já domina o assunto, gostaria que me esclarecessem apenas.

      O curso que estou fazendo pela Internet é voltado a desenvolvimento de games com Java, e nele o professor utiliza algumas classes que fiquei com bastante dúvidas, segue abaixo.

      Qual a diferença entre desenhar usando o objeto Graphics ou usando BufferedImage? O que seria exatamente um BufferedImage, ou BufferStrategy? Não entendi muito bem a questão dos Buffers, preciso mesmo criar um Buffer para desenhar na tela? Ele utiliza também a Classe Canvas e JFrame, para que exatamente elas servem? Elas precisam sempre estar juntas? Qual a aplicação destas classes?

      Estou com dúvida nestes pontos e ficaria muito grato a quem conseguir esclarecer de forma breve para mim, e tenho certeza que irá ajudar outros iniciantes com dúvidas também.

      Muito Obrigado!
    • Por Luiz Fernando 111
      Caros amigos, estou tentando adicionar soma entre inputs do html e do javascript, mas com esse exemplo, apenas consegui colocar no input do html. Como faço para implementar no input do javascript e somar o valor junto com o Valor Total mostrar lucro quando foi debito e prejuizo quando for crédito ? Alguém poderia me dá help !!!
       
       

    • Por Bobrinha
      Olá a todos.
       
      Tenho uma dúvida e não sei se é possível caso tenha alguma sugestão por favor avise.
       
      Adicionar resultado de um innerhtml dentro de um link atributo href é possível? ou seja eu tenho um input onde seleciono um ano 
       
      <select id="ano"> <option selected>2019</option> <option value="2018">2018</option> <option value="2017">2017</option> </select> <div id="anoAtual"></div> No query pego o valor ou seja o ano selecionado e jogo no html
       
      $("select").change(function () { document.getElementById("ano").innerHTML = document.getElementById("anoAtual").value; });  
      Agora vem a dúvida como eu jogo na URL? existe uma outra forma? é possível?
       
      <a href='resultado.php&ano=COMO JOGAR O ANO AQUI?'>  
       
    • Por LuanMartinsTI
      Eu tenho o seguinte codigo para capturar minha camera e meu audio, toda vez que eu entro na pagina x ela executa o js e pede acesso a camera de quem acessa a pagina, porem eu vou bloquear essa pagina para que apenas eu ou pessoa autorizadas possam acessar, queria saber o seguinte, eu sei capturar o video e audio, mas como eu vou mostrar pro usuario o meu video e o meu audio??
      <script> video = document.createElement('video'); video.width = 320; video.height = 240; video.autoplay = true; var hasUserMedia = navigator.webkitGetUserMedia ? true : false; navigator.webkitGetUserMedia('video', function(stream){ video.src = webkitURL.createObjectURL(stream); }, function(error){ console.log("Navegador nao suporta", error); }); </script>  
    • Por martinazzo
      não consigo apagar, então deixei assim... se alguém conseguir por favor
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.