On-the-fly image transformations with Uploadcare in PHP
Uploading images to your website is a common task. But, it’s also important to make sure that the images are optimized for the web. This includes resizing, cropping, compressing the images, and so on.
Doing this manually can be a tedious task. But, thankfully, there are services like Uploadcare that can help you with this. Uploadcare is a cloud-based service that provides you with a CDN and an API to upload, store, process, and deliver images to your website.
Essentially, I came across this service when I was reading replies on this post on X where people were recommending Uploadcare for image processing. So, I thought to give it a try and see how it works.
In this article, we’ll see how we can use Uploadcare to upload images to from website and process them on-the-fly using its API. I’m going to use their PHP SDK for this. So, let’s get started!
- Prerequisites
- Installing the Uploadcare PHP SDK
- Uploading images
- Displaying the uploaded image
- Conclusion
Prerequisites
Before we begin, you need to have an Uploadcare account. You can sign up for a free account if you don’t have one already.
Once you have an account, you need to create a project where all your images will be stored. Once you’ve created a project, you’ll be able to see your project’s API keys. You’ll need these keys to use the Uploadcare API.
Installing the Uploadcare PHP SDK
To use the Uploadcare API, you need to install the Uploadcare PHP SDK. You can install it using Composer like so.
For this demo, I’m going to use the Laravel. So, I’m going to install the SDK into Laravel using the following command. But this SDK can be used with any PHP application that uses Composer.
The only thing you need to make sure is that you have PHP 7.4 or higher installed, php-curl and php-json extensions are enabled on your machine.
Once you have these prerequisites in place, you can install the SDK using the following command.
$ composer require uploadcare/uploadcare-php
This is straight-forward. Once the SDK is installed, you can start using it in your application.
Uploading images
Now, let’s say, I want to upload an image from my local machine to Uploadcare. For that, I would create an endpoint in my application that would pick up the image from the local disc and upload it to Uploadcare.
For this, I’m going to create a route in my routes/web.php file like so.
use Uploadcare\Configuration;
use Uploadcare\Api as UploadcareApi;
Route::get('/upload-image', function () {
$configuration = Configuration::create(
'<your public key>',
'<your private key>'
);
$uploader = (new UploadcareApi($configuration))->uploader();
$fileInfo = $uploader->fromPath(
dirname(__DIR__) . '/AuroraFlowMac.jpg',
null,
null,
'auto'
);
return view('show', [
'fileUuid' => $fileInfo->getUuid()
]);
});
As you can tell, first, we’re creating a configuration object using the Configuration::create() method. This method accepts two arguments. The first argument is your public key and the second argument is your private key. You can find these keys in your Uploadcare project’s dashboard.
Tip: In Laravel, the public key and the private key can be stored in the
.envfile and can be accessed using theenv()helper function.
Next, we’re creating an instance of the Uploadcare\Api class by passing the configuration object to it. And then, we’re calling the uploader() method on the instance to get the uploader object.
Finally, we’re calling the fromPath() method on the uploader object to upload the image to Uploadcare. This method accepts four arguments. The first argument is the path to the image on your local machine. The second argument is the name of the file. The third argument is the MIME type of the file. And the fourth argument is the file’s UPLOADCARE_STORE option which is set to auto in this case.
Once the image is uploaded, the fromPath() method returns an instance of the FileInfo class. This class contains information about the uploaded file. We’re using the getUuid() method on the FileInfo instance to get the UUID of the uploaded file.
Finally, we’re returning a view from the route. This view will be used to display the uploaded image on the page. We’re passing the UUID of the uploaded file to the view.
Displaying the uploaded image
Now, we need to create a view that will display the uploaded image. For that, I’m going to create a view called show.blade.php in the resources/views directory like so.
Here’s how we can display the uploaded image using the UUID of the uploaded file.
<img
src="https://ucarecdn.com/{{ $fileUuid }}/-/preview/"
/>
This will display the uploaded image on the page like so. And top of that, it serves this image from the Uploadcare CDN which makes it super fast.
But the magic doesn’t stop here. We can pass a bunch of parameters to the URL to transform the image on-the-fly to our liking.
Essentially, we can specify the width and height of the image, crop the image, change the format of the image, and even change the quality of the image… all on-the-fly.
Here’s how we can do all of that just by changing the URL to the following.
<img
src="https://ucarecdn.com/{{ $fileUuid }}/-/preview/1000x400/-/format/auto/-/quality/smart_retina/"
/>
As you can tell, we’re specifying the width and height of the image using the 1000x400 parameter. We’re specifying the format of the image using the format/auto parameter. And lastly, we’re setting the quality of the image using the quality/smart_retina parameter.
This is just a glimpse of what you can do with the Uploadcare API. There are a lot of other things you can do with it such as smart cropping, rotation, flipping, mirroring, and so on.
Take a look at all the image transformations you can do with the Uploadcare API here: Image Transformations.
Conclusion
So, as you can tell, Uploadcare is a great service that can help you with image processing. It’s super easy to use and it’s free to use for up to 10,000 monthly operations and 1 GB storage. So, if you’re looking for a service that can help you with image processing, you should definitely give Uploadcare a try.
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
