2

Estoy realizando una aplicación que lee códigos QR, para ello utilizo una librería PHP (QrReader) donde le pasas el valor de un input file y devuelve el valor del codigo QR.

El problema es que solo me funciona con imágenes de baja resolución, la idea es que las fotos a los códigos QR se hagan con el móvil y los móviles realizan fotos a resoluciones muy altas en los que la aplicación no me responde.

Con imágenes de baja resolución (Ej: 600x800) si que funcionan. Estoy intentando de redimensionar la imagen que subo y luego leer su código QR pero me da todo el tiempo ERRO 500: la página no funciona.

He probado varias formas de redimensionar la imagen pero todas con el mismo resultado negativo.

Codigo HTML

<form action="decode.php" method="post" enctype="multipart/form-data">
  <input type="file" name="qrimage" accept="image/*" id="qrimage" capture="camera" class="form-control" <br>
  <input type="submit" class="btn btn-md btn-block btn-danger" value="Decode the Code">
</form>

Archivo PHP

if ($_SERVER['REQUEST_METHOD'] != "POST") {
    header("location: index.php");
    die();
}

require "vendor/autoload.php";

//La imagen
$imagen=$_FILES['qrimage']['tmp_name'];

//Parametros
$nombre='imagen1';
$Path=$imagen;
$alto=800;
$ancho=600;
$imagen_optimizada = $f->redimensionar_imagen($nombre, $Path, $alto, $ancho);


//Lectura del codigo QR
$qrcode = new QrReader($imagen_optimizada);
//Variable donde se muestra el valor del QR
$text = $qrcode->text();

//Funcion para redimensionar la imagen
public function redimensionar_imagen($nombreimg, $rutaimg, $xmax, $ymax){  
        $ext = explode(".", $nombreimg);  
        $ext = $ext[count($ext)-1]; 

    if($ext == "jpg" || $ext == "jpeg")  
        $imagen = imagecreatefromjpeg($rutaimg);  
    elseif($ext == "png")  
        $imagen = imagecreatefrompng($rutaimg);  
    elseif($ext == "gif")  
        $imagen = imagecreatefromgif($rutaimg);  

    $x = imagesx($imagen);  
    $y = imagesy($imagen);  

    if($x <= $xmax && $y <= $ymax){
        //return "<center>Esta imagen ya esta optimizada para los maximos que deseas.<center>";
        return $imagen;  
    }

    if($x >= $y) {  
        $nuevax = $xmax;  
        $nuevay = $nuevax * $y / $x;  
    }  
    else {  
        $nuevay = $ymax;  
        $nuevax = $x / $y * $nuevay;  
    }  

    $img2 = imagecreatetruecolor($nuevax, $nuevay);  
    imagecopyresized($img2, $imagen, 0, 0, 0, 0, floor($nuevax), floor($nuevay), $x, $y);  
    //return "<center>La imagen se ha optimizado correctamente.</center>";
    return $img2;   
}

Gracias de antemano.

10
  • En el primer input de tu formulario le falta un ">" para cerrar el input.
    – Patrick
    el 27 mar. 2019 a las 17:29
  • 1
    Si o si tienes que redimensionarla con php? Si te vale jquery tengo un script que la redimensiona sin distorsionar. el 27 mar. 2019 a las 17:35
  • * hacer el resize en el client y enviar la imagen redimensionada, sino es ancho de banda al subir y memoria en el servidor para que php no vuelque ( ahi puede estar el error 500 ) el 27 mar. 2019 a las 17:43
  • @Emerita también podría con jquery, el caso es que cuando se pulse en el submit, el valor del input file ya sea la nueva imagen redimensionada antes de mandar la petición PHP para leer el QR. Si puedes hacer el favor de ayudarme con ese script de jQuery adaptandolo a mi código te estaría muy agradecido.
    – user110210
    el 27 mar. 2019 a las 18:27
  • Me pillas en el metro, llegaré a casa sobre las 21:00 hora de España. Cuando llegue intento adaptarlo y te lo paso, a ver si te sirve. Creo que puedo adaptarlo como necesitas, pero tengo que verlo en el pc, el móvil es basura para estas cosas. el 27 mar. 2019 a las 18:31

1 respuesta 1

0

Prueba lo siguiente: (Abajo explico las cosas)

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>client side image resize before upload jquery</title>
<script type="text/javascript">
var fileReader = new FileReader();
var filterType = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

fileReader.onload = function (event) {
  var image = new Image();

  image.onload=function(){
      // document.getElementById("original-Img").src=image.src;
      var canvas=document.createElement("canvas");
      var context=canvas.getContext("2d");
      canvas.width=600;
      canvas.height=800;
      context.drawImage(image,
          0,
          0,
          image.width,
          image.height,
          0,
          0,
          canvas.width,
          canvas.height
      );

      document.getElementById("upload-Preview").src = canvas.toDataURL();
  }
  image.src=event.target.result;
};

var loadImageFile = function () {
  var uploadImage = document.getElementById("upload-Image");

  //check and retuns the length of uploded file.
  if (uploadImage.files.length === 0) { 
    return; 
  }

  //Is Used for validate a valid file.
  var uploadFile = document.getElementById("upload-Image").files[0];
  if (!filterType.test(uploadFile.type)) {
    alert("Please select a valid image."); 
    return;
  }

  fileReader.readAsDataURL(uploadFile);
}
</script>
</head>

<body onload="loadImageFile();">
  <form name="uploadForm" method="POST">
    <table>
      <tbody>
        <tr>
          <td>Select Image - <input id="upload-Image" name="qrimage" type="file" onchange="loadImageFile();" /></td>
        </tr>
         <tr>
          <td>Compress Img - <img id="upload-Preview"/></td>
        </tr>
        <tr>
          <td><input type="submit" name="subir"></td>
        </tr>
        <tr>
          <td><br/> Please select image file and save compress file on your machine.<br/> For more - <a href="https://code-sample.com" ratget="_blank"> codesample</a></td>
        </tr>
      </tbody>
    </table>
  </form>
</body>
</html>
<?php 

if ($_SERVER['REQUEST_METHOD'] != "POST") {
    header("location: index.php");
    die();
}

require "vendor/autoload.php";

//La imagen
$imagen=$_FILES['qrimage']['tmp_name'];

//Parametros
$nombre='imagen1';
$Path=$imagen;
$alto=800;
$ancho=600;
$imagen_optimizada = $f->redimensionar_imagen($nombre, $Path, $alto, $ancho);


//Lectura del codigo QR
$qrcode = new QrReader($imagen_optimizada);
//Variable donde se muestra el valor del QR
$text = $qrcode->text();

//Funcion para redimensionar la imagen
public function redimensionar_imagen($nombreimg, $rutaimg, $xmax, $ymax){  
        $ext = explode(".", $nombreimg);  
        $ext = $ext[count($ext)-1]; 

    if($ext == "jpg" || $ext == "jpeg"){  
        $imagen = imagecreatefromjpeg($rutaimg);
      }
    elseif($ext == "png"){
        $imagen = imagecreatefrompng($rutaimg);
      }
    elseif($ext == "gif"){
        $imagen = imagecreatefromgif($rutaimg);
      }

    $x = imagesx($imagen);  
    $y = imagesy($imagen);  

    if($x <= $xmax && $y <= $ymax){
        //return "<center>Esta imagen ya esta optimizada para los maximos que deseas.<center>";
        return $imagen;  
    }

    if($x >= $y) {  
        $nuevax = $xmax;  
        $nuevay = $nuevax * $y / $x;  
    }  
    else {  
        $nuevay = $ymax;  
        $nuevax = $x / $y * $nuevay;  
    }  

    $img2 = imagecreatetruecolor($nuevax, $nuevay);  
    imagecopyresized($img2, $imagen, 0, 0, 0, 0, floor($nuevax), floor($nuevay), $x, $y);  
    //return "<center>La imagen se ha optimizado correctamente.</center>";
    return $img2;   
}

Tienes algunos fallos en tu html, y como era un form simple, te puse este otro. El script no es mio, esta hecho con canvas y js, pero es fácil de adaptar a jquery. Lo que copiado de aquí y lo he adaptado un poco a lo que necesitas. Puedes poner el alto y ancho en las variables canvas.width y canvas.height del js, por lo que no necesitas el script php para redimensionar, pero te lo dejo por si lo usas en mas archivos y lo estás llamando, como veo que tienes un require ahí. Al necesitar redimensionar antes de subirlo y no al servirlo, te puse este, pero si quiere redimensionar al servirlo en la web o aplicación hay otro distinto, que redimensiona al mostrar. Prueba y me dices.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.