I am trying to use laravel intervention plugin. I installed it without problem but can't use it.
I am trying to make a test function which returns resized image, but without success;
I think the problem may be in image path, please help me fix my code.
function test($img)
{
/* $img = Image::make('public/image1.jpg');
$img->resize(300, 200);
return $img; */
$image = Image::make('http://localhost/cms/digital-cms/public/image1.jpg')->resize(200, 200, function ($c) {
$c->aspectRatio();
$c->upsize();
});
return $image;
//$h=200; $w=200;
//return Image::make(public_path('public/image1.jpg')->resize($h, $w)->response('jpg'));
}
//get image
$image=$request->file('image');
//rename image
$input = time().'.'.$image->getClientOriginalExtension();
//your directory to upload
$destinationPath = 'main/images/company';
//save and resize image
$img = Image::make($image->getRealPath());
$img->resize(20,20, function ($constraint) {
$constraint->aspectRatio();
})->save($destinationPath.'/'.$input);
You should use response function on Image class to return the image
$image = Image::make('http://localhost/cms/digital-cms/public/image1.jpg')->resize(200, 200, function ($c) {
$c->aspectRatio();
$c->upsize();
});
return $image->response();
In my case, I was resizing, cropping (fit) but the final image is still the same as original. Found out that I had to add function encode, to produce the manipulated image
return $image->encode('jpg', 80);
Related
Im trying to save a resized copy of an image that has been uploaded, but Image Interventions doesent seem to know in what root directory to begin in, or maybe it is just me that dosent know how to configure it propertly.
This is my code in AvatarImageController#store
public function store(Request $request, Game $game)
{
if ($request->hasFile('game_image')) {
$request->validate([
'game_image' => 'mimes:jpeg,png|max:1014'
]);
$file = $request->file('game_image');
$filename_thumbnail = "thumb_". $file->hashName();
$path_full = $request->file('game_image')->store('images/test_folder');
$path_thumb = $request->file('game_image')->storeAs('images/test_folder/thumbs', $filename_thumbnail);
// resize image
$path_thumb = Intervention::make("./storage/app/public/" . $path_thumb)->resize(300, 200);
$path_thumb->save();
$image = new Image;
$image->full = basename($path_full);
$image->thumb = $filename_thumbnail;
$game->images()->save($image);
return back()->with('success', "Success!! Image uploaded.");
}else{
return back()->with('success', 'Ooops.. something went wrong.');
}
abort(500, 'Could not upload image :(');
}
The error i receive:
Intervention\Image\Exception\NotReadableException
Image source not readable
I suspect this is because im not in the correct path, because of these lines from above function:
// resize image
$path_thumb = Intervention::make("./storage/app/public/" . $path_thumb)->resize(300, 200);
$path_thumb->save();
And it is a real hassel working with explicit paths when using git as deployment.
You can make image directly like this:
$uploadedFile = $request->file('game_image');
$image = Image::make($uploadedFile);
Resize it:
$image = $image->resize(300, 200);
and save it like this:
$image_data = $image->encode('jpg')->__toString();
$relative_file_path = 'images/test_folder/';
Storage::put($relative_file_path, $image_data)
use the storage() helper?
Intervention::make(storage_path('app/public/") . $path_thumb)
I want to crop and resize image and save into multiple folders. But the only a single image is saving in the folder (first one)
public function update(Request $request)
{
$image = $request->file('file');
$name = time().''.mt_rand(100, 200).'_1280x768.'.$image->getClientOriginalExtension();
$name1 = time().''.mt_rand(100, 200).'_320x240.'.$image->getClientOriginalExtension();
$image1= $image->move('public/storage/uploadimage/main', $name);
$image2= $image->move('public/storage/uploadimage/thumb', $name1);
$img = Image::make($imagename);
$img->fit(1280, 768, function ($constraint) {
$constraint->upsize();
});
$img->insert('https://kafesta.com/public/images/kafesta-10.png', 'center');
$img->save($imagename);
$img1 = Image::make($imagename1);
$img1->fit(320, 240, function ($constraint) {
$constraint->upsize();
});
$img1->insert('https://kafesta.com/public/images/kafesta-10.png', 'center');
$img1->save($imagename1);
}
When a user uploads a picture I want to store it in multiple formats.
My code for handling the image:
$img = Image::make($file)->encode('png');
if($img->width()>3000){
$img->resize(3000, null, function ($constraint) {
$constraint->aspectRatio();
});
}
if($img->height()>3000){
$img->resize(null, 3000, function ($constraint) {
$constraint->aspectRatio();
});
}
$uid = Str::uuid();
$fileName = Str::slug($item->name . $uid).'.png';
$high = clone $img;
Storage::put( $this->getUploadPath($bathroom->id, $fileName, "high"), $high);
$med = clone $img;
$med->fit(1000,1000);
Storage::put( $this->getUploadPath($bathroom->id, $fileName, "med"), $med);
$thumb = clone $img;
$thumb->fit(700,700);
Storage::put( $this->getUploadPath($bathroom->id, $fileName, "thumb"), $thumb);
As you see I tried a few variations.
I also tried:
$thumb = clone $img;
$thumb->resize(400, 400, function ($constraint) {
$constraint->aspectRatio();
});
Storage::put( $this->getUploadPath($fileName, "thumb"), $thumb);
The getUploadPath function:
public function getUploadPath($id, $filename, $quality = 'high'){
return 'public/img/bathroom/'.$id.'/'.$quality.'/'.$filename;
}
I want the image to fit in xpx x xpx without scaling or downgrading quality.
The images are created and stored as expected but the image is not resized. How can I make the image resize?
You need to stream it ($thumb->stream();) before saving by Storage facade as below:
$thumb = clone $img;
$thumb->resize(400, 400, function ($constraint) {
$constraint->aspectRatio();
});
$thumb->stream();
Storage::put( $this->getUploadPath($fileName, "thumb"), $thumb);
You need to use the save($img) method to actually create the resized image.
This is what the official docs have to say about this -
To create actually image data from an image object, you can access
methods like encode to create encoded image data or use save to write
an image into the filesystem. It's also possible to send an HTTP
response with current image data.
Image::make('foo.jpg')->resize(300, 200)->save('bar.jpg');
Details on the method in the official docs - http://image.intervention.io/api/save
if ($request->hasFile('image-file')) {
$image = $request->file('image-file');
$fileName = 'IMG'.time() . '.' . $image->getClientOriginalExtension();
$img = Image::make($image->getRealPath());
$img->resize(400, 400, function ($constraint) {
$constraint->aspectRatio();
});
$img->stream();
Storage::disk('local')->put('public/img/bathroom/'.'/'.$fileName, $img, 'public');
}
Hope this works for you!!
I have Upload File Controller method and it is slow on live server, I don't know why? Can you review if my code is structured okay? Is it in the right order? How to optimize my code pls?
$id = Auth::user()->id;
$image=$request->file('file');
$fileName=time().uniqid(rand()).'.'.$image->getClientOriginalExtension();
//Resize image here
$background = Image::canvas(500, 500);
$background->fill('#fff');
$lphoto = Image::make($image->getRealpath());
$lphoto->orientate();
$lphoto->resize(500, 500, function ($constraint) {
$constraint->upsize();
$constraint->aspectRatio();
});
$lphoto->encode();
$sphoto = Image::make($image->getRealpath());
$sphoto->orientate();
$sphoto->fit(186,180);
$sphoto->encode(null, 90);
$background->insert($lphoto, 'center');
$background->encode();
Storage::disk('public')->put( 'images/'.$year.'/'.$month."/".$day."/".$id."/".$fileName, $background);
Storage::disk('public')->put( 'images/'.$year.'/'.$month."/".$day."/".$id.'/small-'.$fileName, $sphoto);
I have integrated a cropping script that returns either an image or an HTMLCanvasElement in my Vue Component. In my component's crop method, I then make an axios post call to my upload function. Here is the crop method:
crop() {
var croppedCanvas = this.cropper.getCroppedCanvas()
var img = croppedCanvas.toDataURL('image/jpeg', 1.0);
var formData = new FormData();
formData.append('image', img) // I can send croppedCanvas here too if I want
axios.post('/api/upload', formData)
}
Now the problem. I can't seem to save the HTMLCanvasElement or the Image as a JPG file. I tried so many different approaches (toDataURL, toBlob, etc.) and have failed in every single one. My latest implementation was as follows:
public function upload(Request $request) {
$input = $request->all();
$img = $input['image'];
Storage::put('picture.jpg', $img);
return response(Response::HTTP_OK);
}
This saves a 26 byte file in the storage/public folder which is unaccessible.
Can someone please help with how to go about this.
I simply want to save the HTMLCanvasElement as a JPG file in my storage/public folder.
Thanks.
Actually as mentioned in the docs over here : https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
toDataURL method returns back a base64 encoded data so you have to decode it on the server side
you can use the base64_decode method in laravel like this
public function upload(Request $request) {
$img = $request->image;
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
Storage::put('picture.jpg', $data);
return response(Response::HTTP_OK);
}