Home / Questions / 99146
Accepted
scorpions
Asked: 2020-09-02 01:12:31 +0800 CST 2020-09-02 01:12:31 +0800 CST

使用 PHP 在服务器上自动保存图像（画布）

  • 772

我已经设法使用 javaScript 和 Ajax 将画布保存为图像，但我希望或不希望出现一个对话框来选择目标文件夹，而是将其保存在预先建立的路径中。

附上代码块：

<script type="text/javascript">
    function guardar() {        
      var link = document.createElement('a')
      link.download = "firma";

      link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
      link.click();
    }
</script>
<button onclick="guardar()" id="convertir">Convertir</button>

在那个代码块中，我定义了转换为图像的函数，但我需要进一步自动化这个过程，通过使用 PHP 将图像保存到服务器上的预设路径，并且函数调用将在管理员给出的同时进行注册用户。

我还有一个问题，如何将图像上传到服务器？我需要将签名保存在数据库中，我怀疑是将图像上传到数据库还是在数据库中保存图像的路径。

php

2 Answers

  1. 根据您分享的小代码，我创建了一个画布并用红色方块填充它。按下按钮时，将使用 POST 方法向同一个 PHP 生成 XHR 查询，该方法发送以 BASE64 编码的图像。

    PHP，当它检测到字段的 POST 发送时imagen，会删除初始标头（直到第一个逗号）并解码 BASE64 数据，以便稍后将其保存在名为imagen.png.

    XHR 代码显示一个链接，允许您查看保存在服务器上的图像。重要的是服务器对其具有写入权限以使其正常工作。

    这是示例：

    <?php
if (isset($_POST['imagen'])) {
    $datos = base64_decode(
      preg_replace('/^[^,]*,/', '', $_POST['imagen'])
    );
    file_put_contents('imagen.png', $datos);
    die('OK');
}
?>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<p><button onclick="guardar()" id="convertir">Convertir</button></p>
<canvas id="canvas" width="200" height="100" style="border: 1px solid black;">
No soportas canvas
</canvas>
<p><a id="imagen" href="imagen.png" target="_blank">Ver imagen generada</a></p>
<script type="text/javascript">
/* Dibujo un recuadro rojo en el canvas */
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 25, 100, 50);
$( '#imagen' ).hide();

function guardar() {
    var imagen = canvas.toDataURL("image/png");
    /* Envío la petición XHR al servidor con los datos de la imagen */
    $.ajax({
        url: "<?= $_SERVER['PHP_SELF'] ?>",
        method: 'post',
        data: { imagen: imagen},
    }).done(function(retorno) {
        alert(retorno);
        $( '#imagen' ).show();
    });
}
</script>
    • 1
  2. Best Answer

    重要的是直接设置画布的width和属性，而不是通过它们，因为它们不是指样式，而是指画布的大小。图像被发送到服务器。heightcss<canvas>Base64

    存储图像的路径必须具有必要的权限。

    我评论了最重要的部分：

    <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ejemplo canvas mano alzada</title>
</head>
<body>

<!-- creamos el camvas -->
<canvas id='canvas' width="200" height="200" style='border: 1px solid #CCC;'>
    <p>Tu navegador no soporta canvas</p>
</canvas>

<!-- creamos el form para el envio -->
<form id='formCanvas' method='post' action='#' ENCTYPE='multipart/form-data'>
    <button type='button' onclick='LimpiarTrazado()'>Borrar</button>
    <button type='button' onclick='GuardarTrazado()'>Guardar</button>
    <input type='hidden' name='imagen' id='imagen' />
</form>

<script type="text/javascript">
    /* Variables de Configuracion */
    var idCanvas='canvas';
    var idForm='formCanvas';
    var inputImagen='imagen';
    var estiloDelCursor='crosshair';
    var colorDelTrazo='#555';
    var colorDeFondo='#fff';
    var grosorDelTrazo=2;

    /* Variables necesarias */
    var contexto=null;
    var valX=0;
    var valY=0;
    var flag=false;
    var imagen=document.getElementById(inputImagen); 
    var anchoCanvas=document.getElementById(idCanvas).offsetWidth;
    var altoCanvas=document.getElementById(idCanvas).offsetHeight;
    var pizarraCanvas=document.getElementById(idCanvas);

    /* Esperamos el evento load */
    window.addEventListener('load',IniciarDibujo,false);

    function IniciarDibujo(){
      /* Creamos la pizarra */
      pizarraCanvas.style.cursor=estiloDelCursor;
      contexto=pizarraCanvas.getContext('2d');
      contexto.fillStyle=colorDeFondo;
      contexto.fillRect(0,0,anchoCanvas,altoCanvas);
      contexto.strokeStyle=colorDelTrazo;
      contexto.lineWidth=grosorDelTrazo;
      contexto.lineJoin='round';
      contexto.lineCap='round';
      /* Capturamos los diferentes eventos */
      pizarraCanvas.addEventListener('mousedown',MouseDown,false);// Click pc
      pizarraCanvas.addEventListener('mouseup',MouseUp,false);// fin click pc
      pizarraCanvas.addEventListener('mousemove',MouseMove,false);// arrastrar pc

      pizarraCanvas.addEventListener('touchstart',TouchStart,false);// tocar pantalla tactil
      pizarraCanvas.addEventListener('touchmove',TouchMove,false);// arrastras pantalla tactil
      pizarraCanvas.addEventListener('touchend',TouchEnd,false);// fin tocar pantalla dentro de la pizarra
      pizarraCanvas.addEventListener('touchleave',TouchEnd,false);// fin tocar pantalla fuera de la pizarra
    }

    function MouseDown(e){
      flag=true;
      contexto.beginPath();
      valX=e.pageX-posicionX(pizarraCanvas); valY=e.pageY-posicionY(pizarraCanvas);
      contexto.moveTo(valX,valY);
    }

    function MouseUp(e){
      contexto.closePath();
      flag=false;
    }

    function MouseMove(e){
      if(flag){
        contexto.beginPath();
        contexto.moveTo(valX,valY);
        valX=e.pageX-posicionX(pizarraCanvas); valY=e.pageY-posicionY(pizarraCanvas);
        contexto.lineTo(valX,valY);
        contexto.closePath();
        contexto.stroke();
      }
    }

    function TouchMove(e){
      e.preventDefault();
      if (e.targetTouches.length == 1) { 
        var touch = e.targetTouches[0]; 
        MouseMove(touch);
      }
    }

    function TouchStart(e){
      if (e.targetTouches.length == 1) { 
        var touch = e.targetTouches[0]; 
        MouseDown(touch);
      }
    }

    function TouchEnd(e){
      if (e.targetTouches.length == 1) { 
        var touch = e.targetTouches[0]; 
        MouseUp(touch);
      }
    }

    function posicionY(obj) {
      var valor = obj.offsetTop;
      if (obj.offsetParent) valor += posicionY(obj.offsetParent);
      return valor;
    }

    function posicionX(obj) {
      var valor = obj.offsetLeft;
      if (obj.offsetParent) valor += posicionX(obj.offsetParent);
      return valor;
    }

    /* Limpiar pizarra */
    function LimpiarTrazado(){
      contexto=document.getElementById(idCanvas).getContext('2d');
      contexto.fillStyle=colorDeFondo;
      contexto.fillRect(0,0,anchoCanvas,altoCanvas);
    }

    /* Enviar el trazado */
    function GuardarTrazado(){
      imagen.value=document.getElementById(idCanvas).toDataURL('image/png');
      document.forms[idForm].submit();
    }
</script>


<?php 
// comprovamos si se envió la imagen
if (isset($_POST['imagen'])) { 

    // mostrar la imagen
    echo '<img src="'.$_POST['imagen'].'" border="1">';

    // funcion para gusrfdar la imagen base64 en el servidor
    // el nombre debe tener la extension
    function uploadImgBase64 ($base64, $name){
        // decodificamos el base64
        $datosBase64 = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $base64));
        // definimos la ruta donde se guardara en el server
        $path= $_SERVER['DOCUMENT_ROOT'].'/firmas/'.$name;
        // guardamos la imagen en el server
        if(!file_put_contents($path, $datosBase64)){
            // retorno si falla
            return false;
        }
        else{
            // retorno si todo fue bien
            return true;
        }
    }

    // llamamos a la funcion uploadImgBase64( img_base64, nombre_fina.png) 
    uploadImgBase64($_POST['imagen'], 'mi_imagen_'.date('d_m_Y_H_i_s').'.png' );
}
?>
</body>
</html>

    注意：如果要用于签名或敏感数据，图像应保存在不公开的目录中，以限制访问。

    • 0