Rotate, Crop image using Guillotine plugin and Laravel 5 Intervention - php

I work on image editor module, using guillotine plugin.
I get parameters from ajax.
{angle: 0,h: 600,scale: 6.7811,w: 800,x: 0,y: 485}
In laravel I have this code
$img = \Input::get('img');
$data = \Input::get('data');
$image = \Image::make($img)->rotate((int)$data['angle']);
// crop image
$image->crop((int)$data['w'], (int)$data['h'], (int)$data['x'], (int)$data['y']);
$image->save('uploads/tmp/img.png');
The code is working , but the result is not the same as the user selected area.
I guess I need to use 'scale' attribute too, but I don't know how.
For example : user selected area
Result
I appreciate your help! :)

you need to use the scale factor
then multiply it by the image width by using the widen() function, it:
Resizes the current image to new width, constraining aspect ratio
so the height will also get scale
$img = \Input::get('img');
$data = \Input::get('data');
list($type, $img) = explode(';', $img);
list(, $img) = explode(',', $img);
$img = base64_decode($img);
// save image
$img = file_put_contents('uploads/tmp/img.png', $img);
$image = \Image::make('uploads/tmp/img.png')->rotate((float)$data['angle']);
//we get the image width then multiply it by the scale factor, it will also scale the height automatically
$image->widen((int)$image->width()*$data['scale']);
// crop image
$image->crop((int)$data['w'], (int)$data['h'], (int)$data['x'], (int)$data['y']);
$image->save('uploads/tmp/img.png');

Related

Crop the image from encoded data on submission - ( File Pond - FilePondPluginFileEncode - imageEditEditor- Doka - Crop - PHP )

Is there any proper PHP code to use when cropping the image using the data that get passed from the hidden field when using the 'FilePondPluginFileEncode'? ( I'm using Doka as image editor) https://pqina.nl/doka/?ref=filepond
The below options get passed as encoded meta data from file-pond in a hidden field when I select an image and then edit crop. + the base64 image string ( https://pqina.nl/filepond/docs/patterns/plugins/file-encode/)
{"crop":{
"center":{"x":0.6019359981,"y":0.5843676986},
"rotation":0,
"zoom":1,
"aspectRatio":0.6567346851,
"flip":{"horizontal":false,"vertical":false},
"scaleToFit":true},
"image":{"width":225,"height":148,"orientation":-1},
"size":{"upscale":true,"mode":"cover","width":null,"height":null},
"output":{"type":null,"quality":null,"background":null},
"filter":null,
"color":{"contrast":{"value":1,"matrix":[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]},"
exposure":{"value":1,"matrix":[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]},"brightness":
{"value":0,"matrix":[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]},"saturation":
{"value":1,"matrix":[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]}
},"markup":[],
"colorMatrix":[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]
}
On submit: This is what i have written to crop. It dose crop, but it's not exactly cropping as we select from file-pond doka image editor
<?php
if (isset($file_format['metadata']['crop'])) {
$im = new \Imagick($uploaded_file->getRealPath());
$aspectRatio = $file_format['metadata']['crop']['aspectRatio'];
$crop_center_x = $file_format['metadata']['crop']['center']['x'];//percentage
$crop_center_y = $file_format['metadata']['crop']['center']['y'];//percentage
$scale = $file_format['metadata']['crop']['zoom'];
//Doka formula for aspectRatio = height/width
//scale to original size but this crop width and height is slightly larger that what we select
//this may need some improvement
$crop_width = ($im->getImageHeight()/$aspectRatio)/$scale; //width of crop selected
$crop_height = ($im->getImageWidth()*$aspectRatio )/$scale; //height of crop selected
//x_of_crop
$x_center_crop = $im->getImageWidth() * $crop_center_x; //pixels from left to crop center
$y_center_crop = $im->getImageHeight() * $crop_center_y; //pixels from top to crop center
$x_left = $x_center_crop - ($crop_width/2);//left position of crop
$y_top = $y_center_crop - ($crop_height/2);//top position of crop
$im->cropImaxge($crop_width,$crop_height,$x_left,$y_top);
file_put_contents($filePath, $im);
$uploaded_file = new UploadedFile($filePath, $file_format['name'], null, null, true);
}
?>
Are we doing this correct or do we have any option to update the base64 string with the cropped image data, so we don't have to do cropping in the server side?
Any help would be appreciated.
Remember to add the FilePondPluginImageTransform, and FilePondPluginFileEncode, to your FilePond.registerPlugin when using imageEditEditor: Doka.create({}) in FilePond instance.
FilePond.registerPlugin(
**FilePondPluginImageTransform,**
FilePondPluginFileEncode,
FilePondPluginFileValidateSize,
FilePondPluginFileValidateType,
FilePondPluginImagePreview,
FilePondPluginImageEdit
);
FilePond.create(
field.
{
imageEditEditor: Doka.create({})
}
)
by adding FilePondPluginImageTransform file-pond will update the cropped image based64 data as well. without that it will only update the meta-data field. https://github.com/pqina/filepond-docs/blob/master/content/patterns/plugins/image-transform.md
so no need of PHP to the cropping. Javascript will crop and give you the cropped image base64 string in the data.
example without using encoded string:
https://medium.com/web-design-web-developer-magazine/leveraging-js-file-uploader-libraries-in-php-forms-example-using-filepond-754cdc9a8b48
Available plugins : https://github.com/pqina/filepond-docs/blob/master/content/patterns/plugins/introduction.md

Crop small file fill with intervention image

Have a way to fill black area of my croped png with transparency, using intervention image?
$data = file_get_contents("php://input");
$img = Image::make($data);
$path = sprintf("%/data/%s/img",public_path(),Auth::user()->account_id);
#mkdir($path,0775,true);
$img->crop(350, 150)->encode('png', 90)->save(sprintf("%s/logo.png",$path));
Solved with trim method!
Solution:
$img->crop(350, 150)->encode('png', 90)->trim()->save(sprintf("%s/logo.png",$path));

Best approach to create thumbnails?

Im working on a template for a website that has already more than 50,000 articles and images assigned to every article.
Before now the article image was visible only inside every article, but now I would like to use thumbnails.
I don't have access to modify the upload image form, so the solution should be something like virtual thumbs created from the original images...
What will be the best approach in this case?
Using Mr. Thumb like I advised a simple script to get it working would be
<?php
include './mrthumb.class.php';
// The image you are resizing. Can be a local path as well.
$image = $_GET['i'];
$quality = 100; // percent
// In this example we are resizing the image in proportionate sizes.
// Below we are specifying the MAX width and height.
$width = 100; // Pixels
$height = 130; // Pixels
// Start Mr. Thumb v1.0
$mrthumb = new MrThumb();
// Render the image
$mrthumb->render( $image );
// Resize the image proportionately
// $mrthumb->constrain( $width, $height );
$mrthumb->proportion( $width, $height );
// Finally, output the image to the browser!
// Optionally we can save the image to a destination
// $mrthumb->saveto( $destination, $filename, $quality );
$mrthumb->output( $quality );
// Clean up after you are done! ;)
$mrthumb->clear_cache();
?>
Then save that to your web server along with the mrthumb class and call a thumbnail in your webpage like
<img src="./mrthumb.php?i=images/myimage.jpg" alt="My Image" />

How to set original image height & width on resize script?

I've finally been able to complete the script for an multiple image resizer, currently it's resizing the original image into 3 other sizes, but I am unable to figure out how to set the original height and width. I have used the getimagesize() but it does not seem to work.
The whole code is here but I don't think it's necessary to post all of it here. http://pastebin.com/UR75tdj3
I have done the following to set each of the images height and width I'd like them to resize into.
$uploadedfile = $_FILES['file']['tmp_name'];
list($width,$height)= getimagesize($uploadedfile);
#large
$largeWidth = 670;
$largeHeight = 330;
$largeTmp = imagecreatetruecolor($largeWidth, $largeHeight);
#medium
$mediumwidth = 330;
$mediumheight = 330;
$mediumTmp = imagecreatetruecolor($mediumWidth,$mediumHeight);
#small
$smallWidth = 327;
$smallHeight = 158;
$smallTmp = imagecreatetruecolor($smallWidth,$smallHeight);
but I wanted to enter the orignal into another folder as well, so I did the following thinking that getimagesize($_FILES['file']['tmp_name']) would return them correctly but it did not.
#original
$originalWidth = $width; //here and
$originalHeight = $height; // here
$originalTmp = imagecreatetruecolor($originalWidth,$originalHeight);
So how do I get the original image height and width as I have tried to do above?
$originalWidth and $originalHeight should return the specific images width & height, but it does not, that is the only issue I am having.
you want to check the size of
$_FILES['file']['tmp_name']
the actull uploaded file as stored on the system
not $_FILES['file']['name'] which is just the filename

How to resize an image like facebook cover

What basically I am trying to do is to create a cover page for my personal website, just like facebook. Basically I am after the same layout of the cover as on facebook, so that user can get the same result while using the same cover on my site as well as on facebook.
The part I am stucked at is the "Drag image to position cover" thing.
The Facebook uses some algorithm to convert the cover image size to something different during dragging thing. For example, if the original image dimensions are 920x720, the dimensions of same image while it is on facebook setting-cover page(drag image to position cover thing), the dimensions of the image are 851x638.
I just wanted to know what algorithm facebook uses to set the image dimensions(from 720 to 638)
NOTE: The cover has to be the pixel perfect
I know that the cover dimension of facebook is 851x315, so here is what I am doing:
//$x = X origin cordinate variable obtained by dragging image
//$y = Y origin cordinate variable obtained by dragging image
list($k, $l) = getimagesize($src); // $src == image source
//$w = Needs to be calculated
//$h = Needs to be calculated
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( 854,316 );
imagecopyresampled($dst_r,$img_r,0,0,$x,$y,$w,$h,$k,$l);
imagejpeg($dst_r,$src,$jpeg_quality);
$img_name = writeToImage($src, $des); //writeToImage() is just a demo function created by me to do some other things with them which do not affect this part of code
echo $img_name;
I need to figure out how facebook calculates the new dimension of the image from previous one. Is it dependent of the actual(original) size of the image or is it dependent on some other factors?
The formulas for scaling images are quite simple.
$aspect_ratio = $original_width / $original_height;
$new_width = $new_height * $aspect_ratio;
or
$new_height = $new_width / $aspect_ratio;

Categories