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. На основе небольшого кода, которым вы поделились, я создал холст и заполнил его красным квадратом. При нажатии кнопки генерируется XHR-запрос к тому же PHP с методом POST, который отправляет изображение, закодированное в 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и heightхолста напрямую, а не через cssних, так как они относятся не к стилю, а к размеру холста <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