{"id":28181,"date":"2022-04-25T06:34:25","date_gmt":"2022-04-25T06:34:25","guid":{"rendered":"http:\/\/how-to-add-fx-to-images-before-uploading"},"modified":"2022-04-25T06:34:25","modified_gmt":"2022-04-25T06:34:25","slug":"how-to-add-fx-to-images-before-uploading","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-fx-to-images-before-uploading\/","title":{"rendered":"How to Add FX to Images before Uploading"},"content":{"rendered":"

Excellent and unique aesthetics make it easy to distinguish on social networking sites, especially in today\u2019s image-driven environment.<\/p>\n

Your image will be more appealing with effects, and it will undoubtedly enhance your imagination.<\/p>\n

An image is a universal language that transcends all barriers. It can communicate effectively with anyone, and it will be even more effective if it has a more pleasing appearance.<\/p>\n

This article will show you how to add FX to images before uploading.<\/p>\n

The completed project is on Codesandbox<\/a>.<\/p>\n

Prerequisite<\/h1>\n

The knowledge of JavaScript and React.js is required to follow through with this article. Also, you need to ensure that you have Node.js<\/a> and npm installed to follow along.<\/p>\n

To Verify the node version installed, use the following terminal command:<\/p>\n

node -v && npm -v \n<\/code><\/span><\/pre>\n
The above command should output their respective versions if installed.<\/p>\n
Project Setup<\/h2>\n
To create a new project, use the npx create-react-app <project name><\/code> command to scaffold a new project in a directory of your choice.<\/p>\n
To install the dependencies, you should use the command below:<\/p>\n
cd <project<\/span> name<\/span>><\/span>\nnpm install lena.js\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Once the app is created, and the dependencies are installed, you will see a message with instructions for navigating to your site and running it locally. You can do this with the following command.<\/p>\n
npm start\n<\/code><\/span><\/pre>\n
React.js will start a hot-reloading development environment accessible by default at http:\/\/localhost:3000<\/a>.<\/p>\n
Next, update the src\/App.js<\/code> file with the code snippet below.<\/p>\n
import<\/span> { useEffect, useRef, useState } from<\/span> \"react\"<\/span>;\nimport<\/span> \".\/styles.css\"<\/span>;\n    \nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n    \nreturn<\/span> (\n  <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n    <h1<\/span>><\/span>How to add FX to images before uploading<\/h1<\/span>><\/span>\n    <div<\/span> className<\/span>=\"splitdiv\"<\/span> id<\/span>=\"leftdiv\"<\/span>><\/span>\n      <div<\/span> id<\/span>=\"leftdivcard\"<\/span>><\/span>\n        <h1<\/span>><\/span>Select your favourite FX<\/h1<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> className<\/span>=\"splitdiv\"<\/span> id<\/span>=\"rightdiv\"<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/div<\/span>><\/span><\/span>\n);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
After adding the styling, your application should look like the image below.<\/p>\n
\"How<\/p>\n
Adding Effects to Image<\/h2>\n
This section will render a default image which  will be us add an effect in the following section.<\/p>\n
Replace your return function with the code snippet below to render a default image.<\/p>\n
    \/\/...   <\/span>\nreturn<\/span> (\n<div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n    \/\/...\n<div<\/span> className<\/span>=\"splitdiv\"<\/span> id<\/span>=\"rightdiv\"<\/span>><\/span>\n  <div<\/span> id<\/span>=\"itemdivcard\"<\/span>><\/span>\n    <img<\/span>\n      style<\/span>={{<\/span> height:<\/span> \"50<\/span>%\" }}\n      crossOrigin<\/span>=\"anonymous\"<\/span>\n      id<\/span>=\"original-image\"<\/span>\n      src<\/span>=\"https:\/\/res.cloudinary.com\/olanetsoft\/image\/upload\/v1649599954\/uploadedFiles\/family-picture.jpg\"<\/span>\n      alt<\/span>=\"Original\"<\/span>\n      \/><\/span>\n  <\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/span>\n);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Your application should look like the image below.<\/p>\n
\"How<\/p>\n
Import the lena.js dependency<\/p>\n
import<\/span> { useEffect, useRef, useState } from<\/span> \"react\"<\/span>;\nimport<\/span> {\n  filterImage,\n  red as<\/span> lenaRed,\n  blue as<\/span> lenaBlue,\n  green as<\/span> lenaGreen,\n  canny as<\/span> lenaCanny,\n  grayscale as<\/span> lenaGrayscale,\n  invert as<\/span> lenaInvert,\n  sepia as<\/span> lenaSepia,\n  noise as<\/span> lenaNoise,\n  saturation as<\/span> lenaSaturation,\n  sobelHorizontal as<\/span> lenaSobelHorizontal,\n  sobelVertical as<\/span> lenaSobelVertical,\n  sharpen as<\/span> lenaSharpen,\n  mirror as<\/span> lenaMirror\n} from<\/span> \"lena.js\"<\/span>;\n    \nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n  \/\/...<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Declare state variable filter<\/code> with a red<\/code>, a variable originalRef<\/code> using a useRef<\/code> with a default value of null<\/code>, and filteredRef<\/code> with a default null<\/code> value, respectively.<\/p>\n
\/\/...<\/span>\n\nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\nconst<\/span> originalRef = useRef(null<\/span>);\nconst<\/span> filteredRef = useRef(null<\/span>);\nconst<\/span> [filter, setFilter] = useState(\"red\"<\/span>);\n    \nreturn<\/span> (\n    \/\/...<\/span>\n);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Add filter to image<\/h2>\n
This section will show you how to add FX to the default image.<\/p>\n
First, Create a Filter<\/code> object as this will  determine the filter color.<\/p>\n
\/\/..<\/span>\n\nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n\/\/...<\/span>\n    \nconst<\/span> filters = {\n  red<\/span>: lenaRed,\n  blue<\/span>: lenaBlue,\n  green<\/span>: lenaGreen,\n  canny<\/span>: lenaCanny,\n  grayscale<\/span>: lenaGrayscale,\n  invert<\/span>: lenaInvert,\n  sepia<\/span>: lenaSepia,\n  noise<\/span>: lenaNoise,\n  saturation<\/span>: lenaSaturation,\n  sobelHorizontal<\/span>: lenaSobelHorizontal,\n  sobelVertical<\/span>: lenaSobelVertical,\n  sharpen<\/span>: lenaSharpen,\n  mirror<\/span>: lenaMirror\n};\n     \nreturn<\/span> (\n    \/\/...<\/span>\n);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Add a dropdown to change filters and create an OnChange<\/code> function to track the changes.<\/p>\n
\/\/..<\/span>\n    \nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n\/\/...<\/span>\n    \nconst<\/span> OnChange = (e<\/span>) =><\/span> {\n  setFilter(e.target.value);\n};\n    \nreturn<\/span> (\n  <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n    <h1<\/span>><\/span>How to add FX to images before uploading<\/h1<\/span>><\/span>\n    <div<\/span> className<\/span>=\"splitdiv\"<\/span> id<\/span>=\"leftdiv\"<\/span>><\/span>\n      <div<\/span> id<\/span>=\"leftdivcard\"<\/span>><\/span>\n        <h1<\/span>><\/span>Select your favourite FX<\/h1<\/span>><\/span>\n        <select<\/span>\n        name<\/span>=\"membership\"<\/span>\n        id<\/span>=\"membership\"<\/span>\n        value<\/span>={filter}<\/span>\n        onChange<\/span>={OnChange}<\/span>\n        ><\/span>\n          {Object.keys(filters).map((key) => (\n            <option<\/span> key<\/span>={key}<\/span> value<\/span>={key}<\/span>><\/span>\n              {key}\n            <\/option<\/span>><\/span>\n          ))}\n        <\/select<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> className<\/span>=\"splitdiv\"<\/span> id<\/span>=\"rightdiv\"<\/span>><\/span>\n       \/\/...\n    <\/div<\/span>><\/span>\n  <\/div<\/span>><\/span><\/span>\n);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, add a useEffect<\/code> to track the originalRef<\/code> onload and render the canvas for the filter.<\/p>\n
\/\/...<\/span>\n    \nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n  \/\/...<\/span>\n    \nuseEffect(()<\/span> =><\/span> {\n  originalRef.current.onload = ()<\/span> =><\/span> {\n    filterImage(filteredRef.current, filters[filter], originalRef.current);\n  };\n});\n    \nreturn<\/span> (\n  <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n    \/\/...\n    <div<\/span> className<\/span>=\"splitdiv\"<\/span> id<\/span>=\"rightdiv\"<\/span>><\/span>\n      \/\/...\n      <div<\/span> id<\/span>=\"itemdivcard\"<\/span>><\/span>\n        {filteredRef && (\n          <canvas<\/span> id<\/span>=\"filtered-image\"<\/span> ref<\/span>={filteredRef}<\/span>><\/span><\/canvas<\/span>><\/span>\n        )}\n      <\/div<\/span>><\/span> \n    <\/div<\/span>><\/span>\n  <\/div<\/span>><\/span><\/span>\n);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Update the image tag by adding a ref<\/code> attribute.<\/p>\n
<div<\/span> className<\/span>=\"splitdiv\"<\/span> id<\/span>=\"rightdiv\"<\/span>><\/span>\n  <div<\/span> id<\/span>=\"itemdivcard\"<\/span>><\/span>\n    <img<\/span>\n    \/\/...<\/span>\n    ref<\/span>={originalRef}<\/span>\n    \/><\/span>\n  <\/div<\/span>><\/span>\n      \/\/...\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
You should have something similar to what is shown below.<\/p>\n
\"How<\/p>\n
If you notice, nothing happens when we change FX from the dropdown. We need to find a way to ensure the useEffect<\/code> hook does not run on the initial render using custom hooks<\/a>.<\/p>\n
To achieve this, add the following code snippet.<\/p>\n
\/\/...<\/span>\n    \nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n  \/\/...<\/span>\nconst<\/span> didMount = useRef(false<\/span>);\n  \/\/...<\/span>\nuseEffect(()<\/span> =><\/span> {\n  if<\/span> (didMount.current) {\n    filterImage(filteredRef.current, filters[filter], originalRef.current);\n  } else<\/span> {\n    didMount.current = true<\/span>;\n  }\n}, [filter]);\n      \nreturn<\/span> (\n  <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n    \/\/...\n  <\/div<\/span>><\/span><\/span>\n);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Testing the application, you should have everything working as expected, as shown below.<\/p>\n
\"How\n\"How<\/p>\n
\"How<\/p>\n
Conclusion<\/h2>\n
This article explained how to add FX to images before uploading using lena.js.<\/p>\n
Reference<\/h2>\n
The current user interface doesn\u2019t look aesthetically pleasing, so you need to add some styling with CSS. You can update src\/styles.css<\/code> file with the following content in this GitHub Gist<\/a>.<\/p>\n