This topic is locked

Guide 11 - Image cutout

3/16/2021 9:05:34 AM
PHPRunner Tips and Tricks
fhumanes author


The phprunner 10.5, as in almost all mobile applications to the users' data is added a photo and in a general way, or we put a photo or any other photo that we want you to describe us in that application.
In all these applications, it allows you to upload a photo and then allows you to adjust exactly what you want to expose in the cutting image.
Objetive
You want to provide Phprunner from the clipping functionality of an image to create the image or avatar of the user's identification of the new Phprunner applications.
DEMO: https://fhumanes.com/imagen
Technical solution
I have made a very simple example for each one to adjust it to the needs of it.
The JavaScript bookstore https://github.com/shpontex/cropme is used integrating it with phprunner. It is simple to use but it has given me some problem with the integration of Bootstrap of the product, so I have had to include this special configuration:



.cropme-slider {

width: 400px !important;

transform: translate3d(262px, 138px, 10px) rotate(-90deg) !important;

transform-origin: 260px 12px !important;

margin-top: 0px !important;

}



The example works:

  1. A new record is registered where we indicate the title and upload a photo (the solution of images in Phprunner file system).
  2. In the viewing option is where the JavaScript library functionality appears and is where the image is made.



So the "special" coding is in this section (view) and on the button entitled "Crop".
For the integration of the library, the functionality of making a "Custom" presentation has been used and this code has been included:



$id = $data['id_imagen_documento'];

$fileArray = my_json_decode($value);

$name = urlencode($fileArray[0]["usrName"]);

$URLName = $fileArray[0]["name"];
$value = <<<EOT

<link rel="stylesheet" href="cropme/cropme.min.css">

<script src="cropme/cropme.js"></script>
<DIV>

<!-- or use image tag -->

<img src="mfhandler.php?file=$name&table=imagen_documento&field=fichero&pageType=view&page=view&key1=$id&nodisp=1" id="myImage" />
<script>

var myImage = $('#myImage').cropme( {

container: {

width: 500,

height: 400

},

zoom: {

min: 0.01,

max: 3,

enable: true,

mouseWheel: true,

slider: true

},

// rotation: {

// enable: true,

// slider: true,

// position: 'left'

// },

viewport: {

width: 150,

height: 150,

type: 'circle',

border: {

enable: true,

width: 2,

color: '#fff'

}

}

});

</script>

</DIV>

EOT;


As you can see the rotation of the photos is commented because I have considered it unrest.
On the "Crop" button, the following coding has been made, only in the "Client Before" part:



var ctrlid = Runner.getControl(pageid, 'id_imagen_documento');

var id_row = ctrlid.getValue();

myImage.cropme('crop', {

type: 'base64',

width: 200

})

.then(function(output) {

var jqxhr = $.post( "MyCode/image_ajax.php", {

id: id_row,

image: output

}, function() {

// setTimeout(function(){ }, 2000); // wait 2 seg.

ajax.setMessage("Sending request to server...");

}

);

jqxhr.always(function() {

ajax.setMessage("Request finish");

location.reload();

});

});


What is done is running a library function and AJAX is called the server with the URL: "MyCode/image_ajax.php" passing the parameters "id" = identification of the registry and "image" = that is the cutout of The image according to the adjustment that has been made.
In the code, it is expected to respond and then recharge the page so that the result is visible.
The code of "image_ajax.php" is:



<?php

@ini_set("display_errors","1");

@ini_set("display_startup_errors","1");

require_once("../include/dbcommon.php");
header("Expires: Thu, 01 Jan 1970 00:00:01 GMT");



$id = $_POST['id'];

$image = $_POST['image'];

if (!isset($_POST['id']) || !isset($_POST['image'])) {

echo "error parameter!!!!!!";

die();

}
$str1 = explode(",", $image);

$blob = base64_decode($str1[1]);

// Update the record

$data = array();

$keyvalues = array();

$data['imagen'] = $blob;

$keyvalues["id_imagen_documento"] = $id;

DB::Update("imagen_documento", $data, $keyvalues );

$error = DB::LastError();
/*

$temp_file = tempnam(sys_get_temp_dir(), 'image');

$gestorFile = fopen($temp_file, "w");

fwrite($gestorFile, $blob);

fclose($gestorFile);

*/
echo "1";

?>


I hope you like the solution and as always, for what you need you can contact me on my email account [email="fernandoHumanes@gmail.com"]fernandoHumanes@gmail.com[/email]
I leave you the example, in my portal, so you can try it on your PC.