ScriptCase 9. Implementación JavaScript Croppie Plugin (Recortar Imagenes)

223 views
Skip to first unread message

Fausto

unread,
May 9, 2020, 2:04:50 AM5/9/20
to comunidad-scrip...@googlegroups.com
JavaScript Croppie Plugin (Recortar Imagenes)  y ScriptCase

Croppie es un Plugin JavaScript muy fácil de utilizar, puedes ver su documentación aquí.
He ajuntado la librería completa en un archivo (croppie.zip) listo para subirlo a scriptcase como librería externa.
Para el ejemplo que vamos a tratar es necesario crear una Liberia externa con el nombre "croppie" y subir el archivo croppie.zip adjuntado en esta publicación, en el ejemplo asumiremos que la libraría externa fue creada como pública.

1.- Crear la librería externa (pública) con el nombre  croppie y subir el archivo croppie.zip a esta librería, esta debe quedar se la siguiente forma:

Paso01.png


2.- Crear un formulario de control y crear en este los siguientes campos :

paso02.png


3.- Configurar el campo foto con los siguientes valores :

paso03.png

En el atributo imagen: puedes utilizar una imagen cualquiera.

 

4.- El campo btnCargaFoto agregamos en el atributo texto el siguiente código HTML; para crear el botón de selección de archivo.

paso04.png



<input type="file" id="getfile" name="getfile" class="custom-file-input"/>


5.- En el evento onScriptinit colocamos el siguiente código.


// onScriptInit

// Carepeta donde se colocará la imagen recortada al guardar.
$imgFolder  = $_SERVER['DOCUMENT_ROOT'].rtrim($this->Ini->path_prod,'/prod').'/file/imgrecortadas';

// Nombre del archivo que se guardará, este lo debes pasar como parámetros.
$imgFileName = [nombre_archivo_resultado];

?>

<html>
<head>
                <!-- Cargando hoja de estilo de la libreria croppie -->
<link rel="stylesheet" href="<?=sc_url_library('sys', 'croppie', 'croppie.css')?>" />
<style>
                        /* Dando un poco de estilo al botón de cargar archivos. */
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Nueva Imagen';
display: inline-block;
background: #188038; 
border: 1px solid #999;
border-radius: 10px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #b7c2bb;
font-weight: 700;
font-size: 10pt;
color : white;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
</style>
</head>
<body>

<!-- Cargado libreria croppie -->
<script src="<?=sc_url_library('sys', 'croppie', 'croppie.min.js')?>"></script>
<script src="<?=sc_url_library('sys', 'croppie', 'exif.js')?>"></script>

<script>
                        // Configurando variables globales javaScript para utilizar con la libreria. 
var imgcnt;
var objcropimg;
var getfile;
var imgFileName = "<?=$imgFileName?>";
var imgFolder   = "<?=$imgFolder?>";

// Creando el objeto de recorte de imagen y lo enlazamos con el campo img.
document.addEventListener("DOMContentLoaded", function(event) {

                                // id_imghtml_foto : es el elemento que genera scriptcase para el campo Foto
                                // eso se puede encontrar a traves del inspector de código de Google Chrome
                        imgcnt = document.getElementById('id_imghtml_foto').firstChild;
 
                                // Enalzadamos con el objecto Croppie 
objcropimg = new Croppie(imgcnt, {
viewport: {width: 250, 
   height: 300, 
   type:'square' //circle 
  },
enableResize: true,
enableOrientation: true,
enableExif: true,
boundary : { widht: 400,
height: 400} 

});

// Vinculando el evento onchange del botón de selección de archivo con
// el evento de vinculación del archivo con el objeto de recorte de imagen.
getfile = document.getElementById('getfile');
getfile.addEventListener("change", function() {
var lector = new FileReader();
lector.onload = function (event) {
objcropimg.bind(
{ url: event.target.result}
).then(function(){
console.log('Foto cargada completamente :'+imgFileName);
});
}
lector.readAsDataURL(this.files[0]);
}, false);
});


</script>
</body>

</html>
<?php



6.- Creamos el botón javaScript "btnGuardar" para guardar la imagen recortada con los siguientes valores:

paso06.png


y le agregamos el siguiente código JavaScript:



objcropimg.result({
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:"<?=sc_url_library('sys', 'croppie', 'upload.php')?>",
type: "POST",
data:{"image": response,
  "imgFileName": imgFileName,
  "imgFolder" : imgFolder
},
success:function(data)
{
console.log('Imagen guardada: '+imgFileName );
scBtnFn_sys_format_ok();
}
});
});





7.-  En la Barra de Herramientas configuraremos los botones btnGuardar, Ok  y Salir en la Barra de Herramientas inferior (es obligatorio hacerlo así).

paso07.png

 

8.- En el Evento Onload colocamos el siguiente código para esconder el botón OK, queremos que las funcionalidades de este continúen activas, por eso solo lo escondemos:

// Onload
?>

<script>
 document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("sub_form_b").style.visibility = "hidden";
 });
</script>

<?php
 

9.- Si queremos que al terminar de guardar el formulario se cierre entonces debemos de incluir en el evento onValidateSuccess el siguiente codigo

// OnValidateSuccess
sc_exit();




Si todo está correcto, entonces debería verse de esta forma cuando lo ejecute:

paso08.png


Espero que este aporte  sirva de ayuda.






croppie.zi_

Fausto

unread,
May 9, 2020, 2:10:08 AM5/9/20
to Comunidad ScriptCase Latino
Algunos problemas para subir el archivo .zip, así que le cambie la extensión a .zi_, luego de descargarla deben renombrar la extensión, para poder arrastrarlo directamente a la librería externa de Scriptcase.
Reply all
Reply to author
Forward
0 new messages