Image Transformation with React and Cloudinary: Generating Personalized Display Images
One way events are publicized is by creating customized display images (DPs) that can be shared across all social media platforms by the would-be attendees.
The aim of this article is to teach you how attendees can generate personalized display images for your event.
For this article, I would be using React, Cloudinary, and Filesaver.js. I assume you have prior knowledge of React and you also have Node.js installed.
If you don’t have an account on Cloudinary create one here. You also need to have to React installed on your system. Instructions here or could just clone my project repo here and run
npm install to install project dependencies for the project. I also assume that you already have a background image you want to use for your DP. See mine below
Let's outline our processes before proceeding 💁
- First, we create our react project
- Then we set up our Cloudinary image and background image
- We then upload the user's image and overlay it on our background image and then download the personalized image.
Step 1: Create our React Project
We would be using
create-react-app in this tutorial to create our project. You can check out the React docs for more info.
Simply open your terminal in a directory of your choice and type the following commands. This would help us set up our React project.
Kindly run the following commands
yarndepending on the package manager of your choice
npm install dotenv --saveto help us with our environmental variables
touch .envto create a .env file in your project root
npm install axios --saveWe would use this to make requests to the Cloudinary server
npm install file-saver --saveThis would help us to save the image generated
code .to open the project in Visual Studio Code. (If you don't have VS code installed, you can use any text editor of your choice)
The above commands would create a new react project. We would be dealing with majorly the
App.css and the
.envfiles in the project. So let's move to step 2.
Step 2: Setup Cloudinary and Background image
I assume at this point that you have already created your Cloudinary account. So before we upload the image we would do need your Cloudinary cloud name and the Cloudinary upload preset. We would save this in our
To get your upload preset:
- Open up your settings
- Click on the upload tab
- Locate upload presets towards the bottom of the page. If it’s isn't enabled, enable it and then copy the presets given to you. You could edit it if you wish
- Head over to your
.envfile and save in the following format
You can get your cloud name from your dashboard. Save into your
.env file with the format
Now finally for our setup. Upload your background image to Cloudinary. You can simply open the Media Library tab and drag the image to upload. After uploading the image copy the
public_id of the image and add to your
.env file in the format
Each uploaded image is in the form of a URL in this format:
Kindly ensure your copy with the file type.
Step 3: Upload the image to Cloudinary and overlay with the background image, then download the image
I assume that you are already familiar with React and would just post images of the code and explain.
This section would be in 3 parts
- Setup of the React component to get the image from the user’s device and save to state
- We upload the image
- We use the public id of the image uploaded to overlay it with the background image and download the generated image.
Setting up the React Component
State object where we save all our data.
React Render method: This is basically the component that gets the image from the user’s device. It contains two input tags one for the image and the other for the user’s name. It also contains some classes for styling.
On change method: this handles the user’s name input
Image change method: this handles the selection of files from the user’s device
Submit method: this handles image upload to Cloudinary.
We would be using the upload URL with follows the format
Note that the
The above code snippet uploads the image to Cloudinary. Notice how we are using our environmental variables in the API call. The API returns the
public_id of the uploaded image and this is used for the image overlay.
We then pass the
public_id to the addOverlay method to help process the overlay effect.
This method takes the response of the API call above and overlays it our background image. The API call made here is of the format
l_: This cloudinary property is used to overlay images. The public id of the image to be overlaid is passed alongside the size you want the image to be and the location along the x and y axis that you want the image to be
r_max: Ths cloudinary property gives the image a border-raduis property that is proportional the greater of the length or width of the image
l_text: This cloudinary image is used to overlay text, the font to be used alongside the text to be overlaid is passed, you also pass the the location along the x and y axis that you want the text to be
x_: This cloudinary property is used to specify the position of an image or text along the x-axis
y_: This cloudinary property is used to specify the position of an image or text along the y-axis
Feel free to play around with the values of
y_ as these depend on your background image.
The response gotten from the above API call contains a property called URL which can use to download the image. We can access the URL using
response.confiq.url, we pass this property to our FileSaver reference as seen above and we download the image.
You can see how simple it is to create personalized DPs for your event.
Here’s a copy of the completed image
Special shoutout to David, Anjola, and Ahmed for reviewing this article.
If you enjoyed this post, please share, comment, and give it a couple of claps . . . Maybe it would help someone. You can also follow me on Twitter(I swear, I’m not boring) and on Medium for more informative articles and tutorials.