Jump to content

Como permitir que o usuário marque áreas de uma imagem e salve a informação no banco de dados?

rpolen

Por rpolen
em PHP

 Compartilhar

Postagens Recomendadas

rpolen

rpolen

Postado
Postado

Bom dia, tenho em um formulário uma imagem com desenho de uma carro, preciso dar ao usuário a opção de marcar com um x aonde foi a batida no carro, e essa informação de onde foi a batida ficar guardada no banco, para posteriormente a imagem ser consultada e impressa.  Alguém tem uma dica de como poderia fazer. 

  • Curtir 1
Link to comment
Compartilhe em outros sites
  • 5 months later...
  • Casa do Desenvolvedor mudou o título para Como permitir que o usuário marque áreas de uma imagem e salve a informação no banco de dados?
  • 2 months later...
frankhosaka

frankhosaka

Postado
Postado (editado) 
arquivo index.php
<?php
// mysql batidas(id int ai,coords varchar(45))
$pdo=new PDO("mysql:host=localhost;dbname=terminais","root","");
if(isset($_POST['coords']))
{
    $coords = $_POST['coords'];
    $pdo->query("insert into batidas (coord) values ('$coords')");
    $batidas=$pdo->query("select * from batidas order by id desc")->fetchAll(PDO::FETCH_OBJ);
    var_dump($batidas);
} else {
    goto gambiarra;
}
?>
<input type=submit value='Cadastrar Nova Batida' onclick="location.replace('index.php')">
<?php exit; gambiarra: ?>
<!DOCTYPE html>
<html>
<head>
    <title>Marcar Batida</title>
</head>
<body>
    <canvas id="Canvas" width="300" height="200"></canvas>
    <form method="post">
        <input type="hidden" name="coords" id="Coords">
        <button type="submit">Enviar</button>
    </form>
<script>
    ctx = Canvas.getContext('2d')
    ctx .fillStyle="red";
    ctx .fillRect(0,0,Canvas.width,Canvas.height)
    img=new Image()
    img.src="carro.jpg"
    img.onload = function()
    {
        ctx.drawImage(img,0,0,Canvas.width,Canvas.height)
    }
    Canvas.addEventListener('click', function(event) 
    {
        x = event.clientX - Canvas.offsetLeft;
        y = event.clientY - Canvas.offsetTop;
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, 2 * Math.PI);
        ctx.fill();
        Coords.value += x + ',' + y + ';';
    });
    </script>
</body>
</html>

 

Captura de tela 2024-08-24 125337.png

Editado por frankhosaka
Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...