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
Im working with Intervention Image to make a frame. Now im stuck on a part to cut off the edges. I need 4 of those images to make them fit as a frame. I know i can use the Intervention Image library to rotate the image, but i have no clue to cut those corners. Anyone has a idea how to achieve this?
Original:
Result:
You need to create two polygons and fill them with transparent colors.
http://image.intervention.io/api/polygon
An example:
$img = Image::make('foo/bar/baz.jpg')->encode('png');
$w = $img->width();
$h = $img->height();
$points = [0,0,$width,0,$width,$width,0,0];
$img->polygon($points, function($d) {
$d->background("transparent");
});
$points = [0,$height,$width,$height,$width,$height-$width,0,$height];
$img->polygon($points, function($d) {
$d->background("transparent");
});
$img->save('foo/bar/baz_cut.png'); // jpg won't have transparency
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');
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" />
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