El problema de la deformación al reducir el tamaño de una imagen, especialmente cuando la imagen es vertical o se ha tomado en un móvil, es general en PHPRunner. Esto ha ocurrido en todas las versiones y yo, al menos, lo he reportado pero , que yo sepa, nunca se ha resuelto.
En mis desarrollos en React, me tuve que enfrentar al problema de reducir las imágenes que tomaba del móvil y consultando en internet vi cómo se resolvía y así lo apliqué en mi desarrollo.
Se ha publicado en el foro de Xlinesoft este mismo problema y visto que a otros muchos desarrolladores tienen el mismo problema, me he animado a hacer este ejercicio.
Objetivo
Hacer transformaciones del tamaño de las imágenes conservando su orientación y proporción, para después utilizar las mismas en PHPRunner o cualquier otra solución.
DEMO: https://fhumanes.com/resize/
Solución Técnica
Intentado que el ejemplo sea didáctico y que los desarrolladores puedan entenderlo para solucionar sus casos, he hecho el siguiente supuesto:
- La imagen se almacena en el «filesystem» del server. Se crea una imagen «grande» ajustada a una tamaño y una miniatura «thumbnail» ajustada la tamaño que se indique.
- En el ejemplo, sólo se permite y es obligatorio, una imagen por registro.
- Los formatos de imágenes permitidas son PNG y JPEG.
- En el ejemplo, el campo «imagen» se sabe si ha pasado el proceso de ajustes de las imágenes si ya dispone del el atributo de «thumbnail». Esta parte es ajustable a las necesidades que tengáis,
- Los cambio se producen en el evento «Before Updated», tanto en la acción de «ADD» y de «EDIT».
- Para la reutilización del mismo código, el algoritmo se pone en un fichero externo, que se ejecuta en los eventos indicados.
El fichero externo está en «MyCode/resize_image.php»
<?php $dir = __DIR__.'/../'; // Path directory files $size_image = 600; $size_mini = 148; // get information about uploaded files $file_array = my_json_decode($values["imagen"]); $file = $file_array[0]; // In the example, only 1 file is allowed if ($file['thumbnail'] == Null ) { // If there is information is that the image has already become // handle single input with single file upload $uploadedFile = $file['name']; $dataFile = array(); $dataFile['filename'] = $file['name']; $dataFile['type'] = $file['type']; $tempFile = tempnam(sys_get_temp_dir(), 'CO_'); // Create temporary file copy($dir.$uploadedFile, $tempFile) ; // Copy File // ++++++++++++++++++++++++++++++ Resize imagen +++++++++++++++++++++++++++++ list($width, $height) = getimagesize($tempFile); // Get the image EXIF data (if available) if ($dataFile['type'] == 'image/jpeg') { // JPEG $source = imagecreatefromjpeg($tempFile); } else { $source = imagecreatefrompng($tempFile); } $exif = exif_read_data($tempFile); // Verify if EXIF data contains guidance information $orientation = $exif['Orientation']; if ( $orientation <> null) { // Rotate the image according to the EXIF orientation switch ($orientation) { case 3: // Rotate 180 degrees $source = imagerotate($source, 180, 0); break; case 6: // Rotate 90 degrees in a schedule $source = imagerotate($source, 270, 0); // Invierto $width, $height $aux = $width; $width = $height; $height = $aux; break; case 8: // Rotate 90 degrees in anti -Horary sense $source = imagerotate($source, 90, 0); // Invierto $width, $height $aux = $width; $width = $height; $height = $aux; break; } } $thumbFile = tempnam(sys_get_temp_dir(), 'TH_'); // Crear fichero Temporal $origFile = tempnam(sys_get_temp_dir(), 'CO_'); // Crear fichero Temporal $percent1 = ($size_image)/$width; // Tamaño completo iamgen $newwidth1 = $width * $percent1; $newheight1 = $height * $percent1; $percent2 = ($size_mini)/$width; // Tamaño thumbnail imagen $newwidth2 = $width * $percent2; $newheight2 = $height * $percent2; $orig = imagecreatetruecolor($newwidth1, $newheight1); $thumb = imagecreatetruecolor($newwidth2, $newheight2); if ($dataFile['type'] == 'image/jpeg') { // JPEG imagecopyresized($orig, $source, 0, 0, 0, 0, $newwidth1, $newheight1, $width, $height); imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth2, $newheight2, $width, $height); imagejpeg($orig,$origFile); imagejpeg($thumb,$thumbFile); } else { // PNG imagecopyresized($orig, $source, 0, 0, 0, 0, $newwidth1, $newheight1, $width, $height); imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth2, $newheight2, $width, $height); imagepng($orig,$origFile); imagepng($thumb,$thumbFile); } unlink($tempFile); // Eliminamos temporal copy($origFile, $dir.$uploadedFile) ; // Copy File // Name File thumbnail $name_array = explode("/", $uploadedFile); $last_name = $name_array[sizeof($name_array)-1]; $name_array = array_diff($name_array, array($last_name)); $last_name = 'th_'.$last_name; $name_array[] = $last_name; $name_thumbFile = implode('/',$name_array); copy($thumbFile, $dir.$name_thumbFile) ; // Copy File $file['size'] = filesize($origFile); $file['thumbnail']= $name_thumbFile; $ile['thumbnail_size']= filesize($dir.$name_thumbFile); // update values of the field that stores file names $file_array[0] = $file; $values["imagen"] = my_json_encode($file_array); unlink($origFile); // Eliminamos temporal unlink($thumbFile); // Eliminamos temporal }
Como siempre, os dejo el fuente para que lo descarguéis y probéis en vuestros PC’s.