{"id":35171,"date":"2024-08-14T07:00:00","date_gmt":"2024-08-14T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=35171"},"modified":"2024-08-13T16:25:04","modified_gmt":"2024-08-13T23:25:04","slug":"cloudinary-apis-build-custom-instagram-like-filter","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter","title":{"rendered":"Utilizing Cloudinary APIs to Build a Custom Instagram-Like Filter"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Image enhancements are essential for creating captivating visual content. Platforms like Instagram make image filters and effects a popular feature, allowing users to transform their photos easily. But how do we bring this functionality to our applications? In this blog post, we\u2019ll create a custom Instagram-like filter using Cloudinary\u2019s powerful transformation APIs.<\/p>\n<h2>Prerequisites<\/h2>\n<p>This blog post assumes you have basic knowledge of <a href=\"https:\/\/react.dev\/\">React.js<\/a>, Vite and <a href=\"https:\/\/tailwindcss.com\/\">Tailwind CSS<\/a>, as well as:<\/p>\n<ul>\n<li>\n<code>Node.js<\/code> and <code>npm<\/code> installed on your machine.<\/li>\n<li>\n<code>A Cloudinary account<\/code>\n<\/li>\n<\/ul>\n<h2>Installation and configuration<\/h2>\n<p>We\u2019ll use React.js powered by Vite, Cloudinary for image storage and transformation, and Tailwind CSS for styling.<\/p>\n<p>Run the following command:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">create<\/span> <span class=\"hljs-selector-tag\">vite<\/span><span class=\"hljs-keyword\">@latest<\/span> cloudinary-image-filter -- --template react\ncd cloudinary-image-filter\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The above command creates a Vite project with React.js as the framework of choice inside a `cloudinary-image-filter\u2019 directory and then navigates to the directory.<\/p>\n<h3>Installing Dependencies<\/h3>\n<p>Now that we have a Vite project, let\u2019s install and set up Tailwind CSS by running the command below:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n<\/code><\/span><\/pre>\n<p>The above command will install <code>tailwindcss<\/code>, <code>postcss<\/code>, and <code>autoprefixer<\/code> as dev dependencies. Next, generate your <code>tailwind.config.js<\/code> and <code>postcss.config.js<\/code> files.<\/p>\n<p>Add the following in your tailwind.config.js file:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-comment\">\/** @type {import('tailwindcss').Config} *\/<\/span>\n<span class=\"hljs-selector-tag\">export<\/span> <span class=\"hljs-selector-tag\">default<\/span> {\n  <span class=\"hljs-attribute\">content<\/span>: &#91;\n    <span class=\"hljs-string\">\".\/index.html\"<\/span>,\n    <span class=\"hljs-string\">\".\/src\/**\/*.{js,ts,jsx,tsx}\"<\/span>,\n  ],\n  theme: {\n    extend: {},\n  },\n  <span class=\"hljs-selector-tag\">plugins<\/span>: <span class=\"hljs-selector-attr\">&#91;]<\/span>,\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now delete the <code>App.css<\/code> file, remove everything inside the <code>index.css<\/code> file, and add the @tailwind directives for each of Tailwind\u2019s layers to your .\/src\/index.css file:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-keyword\">@tailwind<\/span> base;\n<span class=\"hljs-keyword\">@tailwind<\/span> components;\n<span class=\"hljs-keyword\">@tailwind<\/span> utilities;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>Set Up Your Environment Variables<\/h3>\n<p>Create a <code>.env<\/code> file to store your Cloudinary credentials and API configuration:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">VITE_CLOUDINARY_CLOUD_NAME=<span class=\"hljs-string\">'your_cloud_name'<\/span>\nVITE_CLOUDINARY_UPLOAD_PRESET=<span class=\"hljs-string\">'your_upload_preset'<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Replace the placeholders with your actual Cloudinary details.<\/p>\n<p>Before going further, we\u2019ll need an unsigned upload preset configuration in Cloudinary. The <code>upload preset<\/code> is essential for managing client-side uploads securely and efficiently, allowing you to configure upload settings, such as transformations and quality, without exposing your API credentials. This ensures that files are uploaded according to your predefined rules.<\/p>\n<p>If you already have an unsigned preset, you can skip this part.<\/p>\n<ul>\n<li>Log in to your Cloudinary account.<\/li>\n<li>Go to \u201cSettings\u201d &gt; \u201cUpload\u201d.<\/li>\n<li>Scroll to <strong>Upload presets<\/strong> and click <strong>Add upload preset<\/strong>.<\/li>\n<li>Name your preset, set it to <strong>Unsigned<\/strong>, configure settings, and save.<\/li>\n<\/ul>\n<p>This preset name is used in your <code>.env<\/code> file for secure uploads.<\/p>\n<p><strong>Important: Never expose your <code>.env<\/code> file\u2019s contents or commit it to version control systems.<\/strong><\/p>\n<h3>Cloudinary Installation and Configuration<\/h3>\n<p>We\u2019ll need to install the Javascript SDK for image transformation. To install this package, run the following command:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-keyword\">@cloudinary<\/span>\/url-gen\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now that we\u2019ve installed the needed dependencies, let\u2019s create a file that exports a method that uploads files to Cloudinary. Create a file inside the <code>src<\/code> folder called <code>cloudinary.js<\/code> and add the following line of code inside the file:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> uploadImage = <span class=\"hljs-keyword\">async<\/span> (file) =&gt; {\n  <span class=\"hljs-keyword\">try<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> url = <span class=\"hljs-string\">`https:\/\/api.cloudinary.com\/v1_1\/<span class=\"hljs-subst\">${\n      <span class=\"hljs-keyword\">import<\/span>.meta.env.VITE_CLOUDINARY_CLOUD_NAME\n    }<\/span>\/image\/upload`<\/span>;\n    <span class=\"hljs-keyword\">const<\/span> formatData = <span class=\"hljs-keyword\">new<\/span> FormData();\n    formatData.append(<span class=\"hljs-string\">'file'<\/span>, file);\n    formatData.append(\n      <span class=\"hljs-string\">'upload_preset'<\/span>,\n      <span class=\"hljs-keyword\">import<\/span>.meta.env.VITE_CLOUDINARY_UPLOAD_PRESET\n    );\n    <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(url, {\n      <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">'POST'<\/span>,\n      <span class=\"hljs-attr\">body<\/span>: formatData,\n    });\n    <span class=\"hljs-keyword\">if<\/span> (!response.ok) {\n      <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">'Failed to upload image'<\/span>);\n    }\n    <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json();\n    <span class=\"hljs-keyword\">return<\/span> data;\n  } <span class=\"hljs-keyword\">catch<\/span> (error) {\n    <span class=\"hljs-built_in\">console<\/span>.error(error);\n  }\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the above code, we\u2019ll define a function <code>uploadImage<\/code> that uploads an image file to Cloudinary. It takes a file as a parameter and, using the cloud name from the environment variable, constructs the upload URL. It then makes a post request with the file and the upload preset as form data. This method returns a response object if successful or throws an error if the request fails.<\/p>\n<p>With the <code>uploadImage<\/code> function defined, we\u2019re all set to start coding!<\/p>\n<h3>Transforming Images Using Cloudinary Image Transformation API<\/h3>\n<p>The <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#landingpage\">Cloudinary image transformation<\/a> enables you to programmatically generate multiple variations of your high-quality original images by generating a dynamic URL.<\/p>\n<p>With image transformations, you can:<\/p>\n<ul>\n<li>Deliver images using the <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#image_format_support\">image format<\/a> that fits your needs.<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/resizing_and_cropping\">Resize and crop<\/a> your images to the required dimensions using different scaling and cropping techniques, or use our smart cropping techniques, including <a href=\"https:\/\/cloudinary.com\/documentation\/face_detection_based_transformations\">face-detection<\/a> or <a href=\"https:\/\/cloudinary.com\/documentation\/resizing_and_cropping#automatic_cropping_g_auto\">auto-gravity<\/a> for cropping to focus on the most relevant parts of a photo.<\/li>\n<li>Generate a new image by <a href=\"https:\/\/cloudinary.com\/documentation\/layers\">layering<\/a> other images or text on your base image.<\/li>\n<li>Apply various <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#effects_and_artistic_enhancements\">effects, filters, and other visual enhancements<\/a> to help your image achieve the desired impact.<\/li>\n<\/ul>\n<p>We\u2019ll use <code>@cloudinary\/url-gen<\/code> to apply transformation to an image and create a transformation URL.<\/p>\n<p>Let\u2019s upload an image and transform it to have a <code>sepia<\/code> filter, which gives the image a warm, brownish tone reminiscent of old photographs.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { useEffect, useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { uploadImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/cloudinary'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { Cloudinary } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@cloudinary\/url-gen'<\/span>;\n<span class=\"hljs-comment\">\/\/ Import required actions.<\/span>\n<span class=\"hljs-keyword\">import<\/span> { sepia } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@cloudinary\/url-gen\/actions\/effect'<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;imagePublicId, setImagePublicId] = useState();\n\n  <span class=\"hljs-keyword\">const<\/span> cloudinary = <span class=\"hljs-keyword\">new<\/span> Cloudinary({\n    <span class=\"hljs-attr\">cloud<\/span>: {\n      <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">'codemario'<\/span>,\n    },\n    <span class=\"hljs-attr\">url<\/span>: {\n      <span class=\"hljs-attr\">secure<\/span>: <span class=\"hljs-literal\">true<\/span>,\n    },\n  });\n\n  <span class=\"hljs-keyword\">let<\/span> src = <span class=\"hljs-string\">''<\/span>;\n  <span class=\"hljs-keyword\">let<\/span> originalSrc = <span class=\"hljs-string\">''<\/span>;\n  <span class=\"hljs-keyword\">const<\/span> cldImage = imagePublicId &amp;&amp; cloudinary.image(imagePublicId);\n\n  <span class=\"hljs-keyword\">if<\/span> (cldImage) {\n    originalSrc = cldImage.toURL();\n    cldImage.effect(sepia());\n    src = cldImage.toURL();\n  }\n\n  <span class=\"hljs-keyword\">const<\/span> handleFileUpload = <span class=\"hljs-keyword\">async<\/span> (e) =&gt; {\n    <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> uploadImage(e.target.files&#91;<span class=\"hljs-number\">0<\/span>]);\n    setImagePublicId(response.public_id);\n  };\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col mx-auto mt-16 h-full  max-w-2xl\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col self-center shrink h-1\/3 gap-2\"<\/span>&gt;<\/span>\n        {src ? (\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex items-center gap-5\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"max-w-60 flex flex-col gap-4\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Original<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{originalSrc}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-52 h-52\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"max-w-60 flex flex-col gap-4\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Filter<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{src}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-52 h-52\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        ) : (\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-52 bg-gray-300 h-52\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        )}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n          <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span>\n          <span class=\"hljs-attr\">accept<\/span>=<span class=\"hljs-string\">\"image\/*\"<\/span>\n          <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{handleFileUpload}<\/span>\n        \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>You can also provide more than one transformation to produce different results:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/...<\/span>\n<span class=\"hljs-keyword\">import<\/span> { cartoonify } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@cloudinary\/url-gen\/actions\/effect'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { thumbnail } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\/actions\/resize\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { byRadius } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\/actions\/roundCorners\"<\/span>;\n<span class=\"hljs-comment\">\/\/...<\/span>\ncldImage\n      .resize(thumbnail().width(<span class=\"hljs-number\">150<\/span>).height(<span class=\"hljs-number\">150<\/span>))\n      .roundCorners(byRadius(<span class=\"hljs-number\">20<\/span>))\n      .effect(cartoonify());\n\n<span class=\"hljs-comment\">\/\/...<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the above code snippet, we imported different functions from Cloudinary to perform various image transformations.<\/p>\n<ul>\n<li>\n<strong>cartoonify<\/strong>. This function applies a cartoon effect to an image. It processes the image to make it look like a hand-drawn illustration.<\/li>\n<li>\n<strong>thumbnail<\/strong>. Thumbnails are smaller versions of images. This function resizes the image to a specified thumbnail size.<\/li>\n<li>\n<strong>byRadius<\/strong>. This function rounds the corners of an image by a specified radius.<\/li>\n<\/ul>\n<h4>Allowing Users to Customize and Combine Image Filters<\/h4>\n<p>Now that we\u2019ve seen how it works, let\u2019s ensure a user can choose the effect and combine multiple transformations.<\/p>\n<p>To achieve this, we must use an alternative way of applying multiple transformations rather than chained methods. We will use the <a href=\"https:\/\/cloudinary.com\/documentation\/react_image_transformations#object_syntax\">object syntax<\/a> method.<\/p>\n<p>We can use the <code>transformationStringFromObject<\/code> method to build the transformation and add it to our image using the <code>addTransformation<\/code> method. The <code>transformationStringFromObject<\/code> enables adding various transformation effects and enhancements programmatically instead of importing all the individual actions and qualifiers.<\/p>\n<p>There are many <a href=\"https:\/\/cloudinary.com\/documentation\/effects_and_artistic_enhancements\">effects and enhancements<\/a>, but for this blog post, we\u2019ll use a few. The same implementation can be applied to all effects.<\/p>\n<p>Let\u2019s add the following code to <code>App.jsx<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { useEffect, useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { uploadImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/cloudinary'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { Cloudinary, transformationStringFromObject } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@cloudinary\/url-gen'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> FILTERS = &#91;\n  {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Athena'<\/span>,\n    <span class=\"hljs-attr\">filter<\/span>: <span class=\"hljs-string\">'art:athena'<\/span>,\n  },\n  {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Audrey'<\/span>,\n    <span class=\"hljs-attr\">filter<\/span>: <span class=\"hljs-string\">'art:audrey'<\/span>,\n  },\n  {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Daguerre'<\/span>,\n    <span class=\"hljs-attr\">filter<\/span>: <span class=\"hljs-string\">'art:daguerre'<\/span>,\n  },\n  {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Eucalyptus'<\/span>,\n    <span class=\"hljs-attr\">filter<\/span>: <span class=\"hljs-string\">'art:eucalyptus'<\/span>,\n  },\n  {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Fes'<\/span>,\n    <span class=\"hljs-attr\">filter<\/span>: <span class=\"hljs-string\">'art:fes'<\/span>,\n  },\n  {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Incognito'<\/span>,\n    <span class=\"hljs-attr\">filter<\/span>: <span class=\"hljs-string\">'art:incognito'<\/span>,\n  },\n  {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Peacock'<\/span>,\n    <span class=\"hljs-attr\">filter<\/span>: <span class=\"hljs-string\">'art:peacock'<\/span>,\n  },\n  {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Quartz'<\/span>,\n    <span class=\"hljs-attr\">filter<\/span>: <span class=\"hljs-string\">'art:quartz'<\/span>,\n  },\n  {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'cartoonify'<\/span>,\n    <span class=\"hljs-attr\">filter<\/span>: <span class=\"hljs-string\">'cartoonify'<\/span>,\n  },\n  {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Black &amp; white'<\/span>,\n    <span class=\"hljs-attr\">filter<\/span>: <span class=\"hljs-string\">'cartoonify:20:bw'<\/span>,\n  },\n  { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'sepia'<\/span>, <span class=\"hljs-attr\">filter<\/span>: <span class=\"hljs-string\">'sepia'<\/span> },\n  { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Vignette'<\/span>, <span class=\"hljs-attr\">filter<\/span>: <span class=\"hljs-string\">'vignette'<\/span> },\n];\n\n<span class=\"hljs-keyword\">const<\/span> cloudinary = <span class=\"hljs-keyword\">new<\/span> Cloudinary({\n  <span class=\"hljs-attr\">cloud<\/span>: {\n    <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">'codemario'<\/span>,\n  },\n  <span class=\"hljs-attr\">url<\/span>: {\n    <span class=\"hljs-attr\">secure<\/span>: <span class=\"hljs-literal\">true<\/span>,\n  },\n});\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;imagePublicId, setImagePublicId] = useState();\n  <span class=\"hljs-keyword\">const<\/span> &#91;imageFilter, setImageFilter] = useState();\n  <span class=\"hljs-keyword\">const<\/span> &#91;opacity, setOpacity] = useState(<span class=\"hljs-number\">100<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> &#91;brightness, setBrightness] = useState(<span class=\"hljs-number\">50<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> &#91;imageURl, setImageURL] = useState();\n\n  <span class=\"hljs-comment\">\/\/ Apply transformations to the image URL when the image filter, opacity, or brightness changes<\/span>\n  useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> transformation = transformationStringFromObject(&#91;\n      { <span class=\"hljs-attr\">radius<\/span>: <span class=\"hljs-number\">20<\/span> },\n      { <span class=\"hljs-attr\">effect<\/span>: imageFilter },\n      { opacity },\n      { <span class=\"hljs-attr\">effect<\/span>: <span class=\"hljs-string\">`brightness:<span class=\"hljs-subst\">${brightness}<\/span>`<\/span> },\n      { <span class=\"hljs-attr\">fetch_format<\/span>: <span class=\"hljs-string\">'png'<\/span> },\n    ]);\n\n    <span class=\"hljs-keyword\">const<\/span> cldImage = imagePublicId &amp;&amp; cloudinary.image(imagePublicId);\n\n    <span class=\"hljs-keyword\">if<\/span> (cldImage) {\n      <span class=\"hljs-keyword\">if<\/span> (imageFilter || opacity !== <span class=\"hljs-number\">100<\/span>) {\n        cldImage.addTransformation(transformation);\n      }\n      <span class=\"hljs-keyword\">const<\/span> src = cldImage.toURL();\n      setImageURL(src);\n    }\n  }, &#91;imageFilter, opacity, imagePublicId, brightness]);\n\n  <span class=\"hljs-keyword\">const<\/span> handleFileUpload = <span class=\"hljs-keyword\">async<\/span> (e) =&gt; {\n    <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> uploadImage(e.target.files&#91;<span class=\"hljs-number\">0<\/span>]);\n    setImagePublicId(response.public_id);\n  };\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col mx-auto mt-16 h-full max-w-2xl\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col self-center shrink h-1\/3 gap-2\"<\/span>&gt;<\/span>\n        {imageURl ? (\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"max-w-60 flex flex-col gap-4\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{imageURl}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-52 h-52\"<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        ) : (\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-52 bg-gray-300 h-52\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        )}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">accept<\/span>=<span class=\"hljs-string\">\"image\/*\"<\/span> <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{handleFileUpload}<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      {imageURl &amp;&amp; (\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col gap-7 w-full\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex items-center gap-5 w-full\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-full\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">htmlFor<\/span>=<span class=\"hljs-string\">\"opacity\"<\/span>&gt;<\/span>Opacity<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n                <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"opacity\"<\/span>\n                <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"opacity\"<\/span>\n                <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"range\"<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-full\"<\/span>\n                <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{opacity}<\/span>\n                <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{(e)<\/span> =&gt;<\/span> setOpacity(+e.target.value)}\n              \/&gt;\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-full\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">htmlFor<\/span>=<span class=\"hljs-string\">\"brightness\"<\/span>&gt;<\/span>Brightness<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n                <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"range\"<\/span>\n                <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"brightness\"<\/span>\n                <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"brightness\"<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-full\"<\/span>\n                <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{brightness}<\/span>\n                <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{(e)<\/span> =&gt;<\/span> setBrightness(+e.target.value)}\n              \/&gt;\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col gap-3\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Filters<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex gap-2 flex-wrap\"<\/span>&gt;<\/span>\n              {FILTERS.map(({ filter, name }) =&gt; {\n                return (\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>\n                    <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{name}<\/span>\n                    <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">filter<\/span> === <span class=\"hljs-string\">imageFilter<\/span> ? '<span class=\"hljs-attr\">border<\/span> <span class=\"hljs-attr\">border-green-500<\/span>' <span class=\"hljs-attr\">:<\/span> ''} <span class=\"hljs-attr\">p-2<\/span>`}\n                  &gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                      <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col w-24 justify-center items-center\"<\/span>\n                      <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> setImageFilter(filter)}\n                    &gt;\n                      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span>\n                        <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-48 h-24\"<\/span>\n                        <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{cloudinary.image(imagePublicId).effect(<\/span>`<span class=\"hljs-attr\">e_<\/span>${<span class=\"hljs-attr\">filter<\/span>}`)<span class=\"hljs-attr\">.toURL<\/span>()}\n                        <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">{name}<\/span>\n                      \/&gt;<\/span>\n                      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>{name}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                );\n              })}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      )}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the above code, we created a dynamic image editor that allows users to upload an image, apply various filters, and adjust the image settings like opacity and brightness in real-time using Cloudinary. When the user selects an image, it\u2019s uploaded to Cloudinary, and the public ID is saved in <code>useState<\/code>. If the user selects a filter or adjusts the brightness or opacity level,  these transformations are applied, and Cloudinary dynamically generates the transformation URL. This transformation URL is constructed using Cloudinary\u2019s <code>transformationStringFromObject<\/code> method, which combines selected filters and adjustments into a transformation string. Cloudinary applies these transformations to the image, and the updated image URL reflects these changes, resulting in an immediate preview that shows the applied effects.<\/p>\n<p>If the user decides to download the image, it\u2019s downloaded with the effects applied to it.<\/p>\n<h2>Conclusion<\/h2>\n<p>In this blog post, we used Cloudinary\u2019s image transformation features to build an Instagram-like filter application, demonstrating the powerful capabilities of Cloudinary\u2019s API for building advanced image editing applications. Cloudinary allows you to easily transform your images on the fly to any required format, style, and dimension and apply effects and other visual enhancements. <a href=\"https:\/\/cloudinary.com\/\">Create an account today<\/a>.<\/p>\n<p>If you found this blog post helpful and want to discuss it in more detail, head over to the <a href=\"https:\/\/community.cloudinary.com\/\">Cloudinary Community forum<\/a> and its associated <a href=\"https:\/\/community.cloudinary.com\/\">Discord<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":35172,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[332,165],"class_list":["post-35171","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-api","tag-image-transformation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Utilizing Cloudinary APIs to Build a Custom Instagram-Like Filter<\/title>\n<meta name=\"description\" content=\"Image enhancements are essential for engaging visuals. Learn how to create a custom Instagram-like filter using Cloudinary&#039;s powerful transformation APIs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Utilizing Cloudinary APIs to Build a Custom Instagram-Like Filter\" \/>\n<meta property=\"og:description\" content=\"Image enhancements are essential for engaging visuals. Learn how to create a custom Instagram-like filter using Cloudinary&#039;s powerful transformation APIs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-14T14:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1723138263\/api_insta_filters-blog\/api_insta_filters-blog.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Utilizing Cloudinary APIs to Build a Custom Instagram-Like Filter\",\"datePublished\":\"2024-08-14T14:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1723138263\/api_insta_filters-blog\/api_insta_filters-blog.jpg?_i=AA\",\"keywords\":[\"API\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter\",\"url\":\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter\",\"name\":\"Utilizing Cloudinary APIs to Build a Custom Instagram-Like Filter\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1723138263\/api_insta_filters-blog\/api_insta_filters-blog.jpg?_i=AA\",\"datePublished\":\"2024-08-14T14:00:00+00:00\",\"description\":\"Image enhancements are essential for engaging visuals. Learn how to create a custom Instagram-like filter using Cloudinary's powerful transformation APIs.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1723138263\/api_insta_filters-blog\/api_insta_filters-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1723138263\/api_insta_filters-blog\/api_insta_filters-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Utilizing Cloudinary APIs to Build a Custom Instagram-Like Filter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Utilizing Cloudinary APIs to Build a Custom Instagram-Like Filter","description":"Image enhancements are essential for engaging visuals. Learn how to create a custom Instagram-like filter using Cloudinary's powerful transformation APIs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter","og_locale":"en_US","og_type":"article","og_title":"Utilizing Cloudinary APIs to Build a Custom Instagram-Like Filter","og_description":"Image enhancements are essential for engaging visuals. Learn how to create a custom Instagram-like filter using Cloudinary's powerful transformation APIs.","og_url":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter","og_site_name":"Cloudinary Blog","article_published_time":"2024-08-14T14:00:00+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1723138263\/api_insta_filters-blog\/api_insta_filters-blog.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Utilizing Cloudinary APIs to Build a Custom Instagram-Like Filter","datePublished":"2024-08-14T14:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1723138263\/api_insta_filters-blog\/api_insta_filters-blog.jpg?_i=AA","keywords":["API","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter","url":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter","name":"Utilizing Cloudinary APIs to Build a Custom Instagram-Like Filter","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1723138263\/api_insta_filters-blog\/api_insta_filters-blog.jpg?_i=AA","datePublished":"2024-08-14T14:00:00+00:00","description":"Image enhancements are essential for engaging visuals. Learn how to create a custom Instagram-like filter using Cloudinary's powerful transformation APIs.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1723138263\/api_insta_filters-blog\/api_insta_filters-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1723138263\/api_insta_filters-blog\/api_insta_filters-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/cloudinary-apis-build-custom-instagram-like-filter#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Utilizing Cloudinary APIs to Build a Custom Instagram-Like Filter"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1723138263\/api_insta_filters-blog\/api_insta_filters-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/35171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=35171"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/35171\/revisions"}],"predecessor-version":[{"id":35174,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/35171\/revisions\/35174"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/35172"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=35171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=35171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=35171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}