Image Effects Creating Custom Image Cropping Interfaces in Android How to Create Simple Yet Effective PHP Overlay Understanding Real-Time Image Recognition How to add a shadow effect to an image with CSS How to crop an image in Flutter with Cloudinary How To Rotate an Image with Java Image Processing with Python Rotating an image with CSS Enhancing User Experience with a Responsive Image Slider Building a Python Image Recognition System Building an Interactive JavaScript Image Manipulation Tool Image Align Centering with HTML and CSS Efficient Image Cropping Techniques with Angular and Cloudinary Ultimate Guide to Photo Gallery on Android A Comprehensive Guide to Adding Text to Images on Android Mastering Background Changes in React Applications Comprehensive Guide on Changing Background on Android Devices Mastering Image Rotation in Java A Guide to Adding Text to Images with Python A Guide to Converting Images to Grayscale with Python Introduction Creating an Image Overlay with JavaScript Rotating an Image in Python Creating a Dynamic Photo Gallery with jQuery Creating An Interactive Photo Gallery Using JavaScript Mastering Overlay in Android Mastering Angular Overlay: A Comprehensive Guide Comprehensive Guide to Overlay in Flutter Mastering Overlay React for Responsive Design Solutions Create a Blurred Image with PHP: A Comprehensive Guide Guide to Using Blur Image in Flutter Mastering Blur Image in React Native Mastering Image Blurring in Python Mastering the Art of Image Blurring Mastering the Art of Image Blurring in Java The Ultimate Guide to Blurring Images on Android Understanding and Implementing Blur Image in JQuery An Extensive Walkthrough of Blurring Images with JavaScript How to Use HTML, CSS, and JavaScript to Make an Image Slider HTML Image Tag How to Crop GIFs? How to Align Images with CSS Ken Burns Effect – Complete Guide and How to Apply It Cartoonify – Complete Guide on Cartoonify Image Effect Mastering Web Aesthetics: A Comprehensive Guide to Gradient Fades Sepia Effect: The Ultimate Guide to the Sepia Photo Effect What is Vignette? Guide to Vignette Image Editing Pixelate – The Ultimate Guide to the Pixelation Effect How to Outline an Image: Enhancing Visual Appeal and Depth Make Your Photos Pop with Image Effects Upscale Image – Developers guide to AI-driven image upscaling Image Manipulation: History, Concepts and a Complete Guide A Full Guide to Object-aware Cropping Simplify Your Life with Automatic Image Tagging How To Resize Images In WordPress How To Create a Progress Bar For Asset Uploads Animated GIFs – What They Are And How To Create Them How To Automatically Improve Image Resolution AI Drop Shadow Get Image Dimensions From URLs Automatically Add Sepia Effect To Images Automatically Make an Image a Cartoon Automatically Add Blur Faces Effect To Images Automatically Add Background Removal Effect to an Image How to Resize an Image with React How to Easily Resize an Image with React Native

Automatically Add Sepia Effect To Images

sepia effect

Adding a sepia effect to your images can give them a vintage feel, and can quickly turn your contemporary photos into ones with a flair. This post will demonstrate how to use Cloudinary to add a sepia effect efficiently, and at scale.

What is Cloudinary?

Most image editing apps and programs, such as Photoshop, include sepia effects. However, when you have to perform this at scale, it becomes a tedious task. This is where Cloudinary can help.

Cloudinary is an end-to-end media management platform for websites and applications that enables you to quickly and easily add improvements and effects to your images and video. A wide range of cloud-based image manipulations are included in Cloudinary. When dynamic image URLs are viewed, transformations happen instantly, then are promptly cached on CDN servers for the quickest delivery.

Cloudinary effectively delivers images with a sepia effect with just one parameter and a few optional characteristics. Let’s see it in action!

Adding sepia effect to your images programmatically

Prerequisites

To start applying sepia effects to your images, you’ll first need to sign up at Cloudinary. If you don’t have an account, you can sign up for free.

In addition, you should have Node JS installed on your computer. If not, you can install it from their official webpage.

“Image

Uploading Images to Cloudinary

Before adding an effect to the image, upload it to Cloudinary. For this tutorial, we will upload the image to Cloudinary using the Cloudinary API.

Select the image you want to upload. For this, we’ll use the following beach_huts.jpg image:

Select image to add sepia effect to

Next, you’ll need to get your environment variable for Cloudinary. After logging in, you’ll be directed to the Cloudinary dashboard where you’ll see you’re environment variable :

Choose Cloudinary environment variable

Copy the ‘API Environment variable,’ then create a .env file in your code folder and paste the variable:

Copy the API environment variable

Now, create your JS script. Open your code folder and create a JS file named ‘upload.js.’ We’ll use the dotenv library to authenticate our API. We will use the Cloudinary Node JS SDK to upload the assets. First, open a terminal and install the script libraries using the following commands:

npm install dotenv
npm install cloudinary

Create script

Open your upload.js file and import the libraries:

// Reads the Cloudinary Environment variable
require("dotenv").config();

// Using V2 of Cloudinary Node JS SDK
const cloudniary = require("cloudinary").v2;

// Picking up env and configuring
console.log(cloudniary.config().cloud_name);

Call the Cloudinary upload API and specify the file you want to upload, adding this to the callback function:

// Calling upload API
cloudniary.uploader
.upload("./assets/beach_huts.jpg", {
    // Default resource type is image if your even if your don't specify
    // it
    resource_type: "image", public_id: "beach_huts"
})
.then((result) => {

    // Provide output in a formatted string
    console.log("sucess", JSON.stringify(result, null, 2));

})
.catch((error) => {
    console.log("error", JSON.stringify(error, null, 2));
});

Here, not only are we calling our API, but we’re also using promises to handle the success and failures of the API. By default, Cloudinary provides a random public_id (the name of the asset in Cloudinary) to assets. We’re explicitly defining it as “beach_huts.” This will allow us to retrieve and keep track of the image.

Run the code using Node JS:

node upload.js

Run the code using Node.js

Your image has successfully been uploaded to Cloudinary! You can view the image in any URLs returned in JSON:

View image as a return url

You can also view your image by going to the Media Library tab on your Cloudinary account:

View image in media library as well

Adding sepia effect to images

To add sepia effect, we’ll use the same functions and libraries. The only thing we’ll be doing is retrieving the image.

Create a .env file and add your environment variable. Then, create a file named retrieve.js and import the same libraries:

Retrieve the image

Before we can add the effect to the image, retrieve it. Call the Cloudinary API and specify the public_id of the image, adding it to the console:

// Retrieving image
const img = cloudinary.image("beach_hut");

console.log('images', img)

Running the code will result in a URL:

Running the code will result in URL

Opening the URL will yield the image:

View image as a return url

Modify the Cloudinary call by adding an effect parameter and specifying the ‘sepia’ effect:

const img = cloudinary.image("beach_huts", {effect: "sepia"});

Here’s the final code:

// Reads the Cloudinary Environment variable
require("dotenv").config();

// Using V2 of Cloudinary Node JS SDK
const cloudinary = require("cloudinary").v2;

// Picking up env and configuring
console.log(cloudinary.config().cloud_name);

// Retrieving image
const img = cloudinary.image("beach_huts", {effect: "sepia"});

console.log('images', img)

Running the code yields the following image:

Image with sepia effect programmatically added

Conclusion

You’ve successfully used Cloudinary to apply sepia effect to images, dynamically. Cloudinary’s aesthetic effects are an easy way to alter how your images appear on your website or application. You can alter the format, blur and pixelate them, improve their quality, adjust colors, apply filters, and much more. All this is possible with a free Cloudinary account. In addition, Cloudinary offers SDKs (Software Development Kits) for backend, frontend, and mobile development. You can read about the SDKs available in the Cloudinary Documentation.

More from Cloudinary:

Last updated: Nov 22, 2023