DEV Community: Mohamed Soliman

Image Processing with JavaScript

Mohamed Soliman — Wed, 01 Mar 2023 15:18:16 +0000

In this article you will learn how to create image filters and apply them on any kind of image.

Canvas

First, you will need to create two canvas. one for the original image and the other for modified image. Also, you will need to create image class

const Img = new Image();
Img.src = "Images/Img.jpg";

const ImgCanvas = document.getElementById('Img');
const ImgContext = ImgCanvas.getContext('2d');

const MainCanvas = document.getElementById('MainCanvas');
const MainContext = MainCanvas.getContext('2d');

window.onload = () => {
    ImgCanvas.width = Img.width; 
    ImgCanvas.height = Img.height; 

    MainCanvas.width = Img.width; 
    MainCanvas.height = Img.height; 

    ImgContext.drawImage(Img, 0, 0, ImgCanvas.width, ImgCanvas.height)
    MainContext.drawImage(Img, 0, 0, MainCanvas.width, MainCanvas.height);
}

You can do it with one canvas and it will process faster, but doing it with 2 canvas helps you to visualize the difference. drawImage function is used inside window.onload function to draw
the image to the canvas after the image is fully loaded.

Filters

Then you will need to create some filters to test on our image. I will make few filters and you don't need to do all of them. you can just choose a couple.

Brightness

function SaturationFilter(imageData, Value){
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
      const red = data[i];
      const green = data[i + 1];
      const blue = data[i + 2];

      // Calculate the grayscale value
      const gray = 0.2126 * red + 0.7152 * green + 0.0722 * blue;

      // Adjust the saturation based on the given percentage
      const r = (1 - Value / 100) * red + Value / 100 * gray;
      const g = (1 - Value / 100) * green + Value / 100 * gray;
      const b = (1 - Value / 100) * blue + Value / 100 * gray;

      data[i] = r;
      data[i + 1] = g;
      data[i + 2] = b;
    }

    MainContext.putImageData(imageData, 0, 0);
}

Contrast

function ContrastFilter(imageData, Value){
    const data = imageData.data;

    const factor = (259 * (Value + 255)) / (255 * (259 - Value));

    for (let i = 0; i < data.length; i += 4) {
    const red = data[i];
    const green = data[i + 1];
    const blue = data[i + 2];

    // Adjust the contrast
    data[i] = factor * (red - 128) + 128;
    data[i + 1] = factor * (green - 128) + 128;
    data[i + 2] = factor * (blue - 128) + 128;
    }

    MainContext.putImageData(imageData, 0, 0);
}

Saturation

function SaturationFilter(imageData, Value){
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
      const red = data[i];
      const green = data[i + 1];
      const blue = data[i + 2];

      // Calculate the grayscale value
      const gray = 0.2126 * red + 0.7152 * green + 0.0722 * blue;

      // Adjust the saturation based on the given percentage
      const r = (1 - Value / 100) * red + Value / 100 * gray;
      const g = (1 - Value / 100) * green + Value / 100 * gray;
      const b = (1 - Value / 100) * blue + Value / 100 * gray;

      data[i] = r;
      data[i + 1] = g;
      data[i + 2] = b;
    }

    MainContext.putImageData(imageData, 0, 0);
}

Box Blur

function BoxBlurFilter(imageData, radius) {
    var data = imageData.data;

    // Define the box blur kernel
    var kernelSize = radius * 2;
    var kernel = new Array(kernelSize * kernelSize);
    for (var i = 0; i < kernel.length; i++) {
      kernel[i] = 1 / (kernel.length);
    }

    // Loop through each pixel and apply the box blur
    for (var y = 0; y < imageData.height; y++) {
      for (var x = 0; x < imageData.width; x++) {
        var r = 0;
        var g = 0;
        var b = 0;

        // Loop through the kernel and apply the blur
        for (var ky = 0; ky < kernelSize; ky++) {
          for (var kx = 0; kx < kernelSize; kx++) {
            var cx = x + kx - radius;
            var cy = y + ky - radius;
            var idx = (cy * imageData.width + cx) * 4;

            if (cx >= 0 && cx < imageData.width && cy >= 0 && cy < imageData.height) {
              r += data[idx] * kernel[ky * kernelSize + kx];
              g += data[idx + 1] * kernel[ky * kernelSize + kx];
              b += data[idx + 2] * kernel[ky * kernelSize + kx];
            }
          }
        }

        // Set the new pixel value
        var idx = (y * imageData.width + x) * 4;
        data[idx] = r;
        data[idx + 1] = g;
        data[idx + 2] = b;
      }
    }

    MainContext.putImageData(imageData, 0, 0);   
}

Gaussian Blur

function GaussianBlur(imageData, radius) {
    var data = imageData.data;
    var side = radius * 2 + 1;
    var matrix = [];
    var sigma = radius / 3;
    var sigma22 = 2 * sigma * sigma;
    var sqrtPiSigma22 = Math.sqrt(Math.PI * sigma22);

    for (var y = -radius; y <= radius; y++) {
        for (var x = -radius; x <= radius; x++) {
            var weight = Math.exp(-(x * x + y * y) / sigma22) / sqrtPiSigma22;
            matrix.push(weight);
        }
    }

    var weights = new Float32Array(matrix);

    for (var i = 0; i < data.length; i += 4) {
      var r = 0, g = 0, b = 0, a = 0;

        for (var wy = -radius; wy <= radius; wy++) {
            for (var wx = -radius; wx <= radius; wx++) {
                var y = i / (imageData.width * 4) + wy;
                var x = i / 4 - y * imageData.width + wx;
                if (x >= 0 && x < imageData.width && y >= 0 && y < imageData.height) {
                    var index = (y * imageData.width + x) * 4;
                    var weight = weights[(wy + radius) * side + wx + radius];
                    r += data[index] * weight;
                    g += data[index + 1] * weight;
                    b += data[index + 2] * weight;
                    a += data[index + 3] * weight;
                }
            }
        }

        data[i] = r;
        data[i + 1] = g;
        data[i + 2] = b;
        data[i + 3] = a;
    }

    MainContext.putImageData(imageData, 0, 0); 
}

Sharpness

function SharpnessFilter(imageData, Value){
    const data = imageData.data;

    if(Value >= 1){
    var matrix = [0, -1, 0, -1, Value + 4, -1, 0, -1, 0];
    var divisor = Value + 4;
    var bias = -Value / 4;

        for (var y = 0; y < imageData.height; y++) {
            for (var x = 0; x < imageData.width; x++) {
                var pixelIndex = (y * imageData.width + x) * 4;
                var r = 0, g = 0, b = 0;

                for (var row = -1; row <= 1; row++) {
                    for (var col = -1; col <= 1; col++) {
                        var rowIndex = y + row;
                        var colIndex = x + col;

                        if (rowIndex >= 0 && colIndex >= 0 && rowIndex < imageData.height && colIndex < imageData.width) {
                            var index = (rowIndex * imageData.width + colIndex) * 4;
                            var weight = matrix[(row + 1) * 3 + col + 1];

                            r += data[index] * weight;
                            g += data[index + 1] * weight;
                            b += data[index + 2] * weight;
                        }
                    }
                }

            data[pixelIndex] = Math.min(255, Math.max(0, (r / divisor) + bias));
            data[pixelIndex + 1] = Math.min(255, Math.max(0, (g / divisor) + bias));
            data[pixelIndex + 2] = Math.min(255, Math.max(0, (b / divisor) + bias));
            }
        }    

        MainContext.putImageData(imageData, 0, 0);  
    }   
}

Greyscale

function GreyScaleFilter(imageData, value){
    const data = imageData.data;

    for(let i = 0; i < data.length; i += 4){
        const Total = data[i] + data[i+1] + data[i+2];
        const Average = Total/2;
        data[i] = Average + value; 
        data[i+1] = Average+ value; 
        data[i+2] = Average+ value; 
    }

    MainContext.putImageData(imageData , 0, 0);
}

Filter Group

Now we will need to create some radio buttons to handle the change of the filter.

<!-- HTML -->
<input type="radio" name="Filters" id="saturation" value="Saturation">
   <label class="icon_img icon-saturation" for="saturation">
      <img src="Saturation.png">
      <span class="tooltip">Saturation</span>
   </label>

You will have to create radio button for each filter you have selected. Also, you will need to change the values of input id, input value and for value in label according to the selected filter.

Then add some javascript.

//JavaScript
var Filter;
const RadioButtons= document.querySelectorAll('input[name="Filters"]');

function handleClick(){
    for (RB of RadioButtons) {
        if (RB.checked) {
            Filter = RB.value;
            break;
        }
    }
}

Slider

You will need to create a slider to change the effect value of the filter that is applied to the image.

<!-- HTML -->
<div class="slidecontainer">
   <input type="range" min="-50" max="50" value="0" class="slider" id="Range">
   <output class="bubble" id="InputValue"></output>
</div>

Then add some javscript.

//JavaScript
const Slider = document.getElementById("Range");
const InputValue = document.getElementById("InputValue");

InputValue.innerHTML = Slider.value;

Slider.oninput = function()  {
    InputValue.innerHTML = this.value;
}

Slider.onchange = () => {
    const imageData = ImgContext.getImageData(0, 0, ImgCanvas.width, ImgCanvas.height);

    handleClick();
    if(Filter === 'Brightness'){
        MainContext.putImageData(BrightnessFilter(imageData, Number(Slider.value)), 0, 0);
    }
    else if(Filter === 'Saturation'){
        MainContext.putImageData(SaturationFilter(imageData, Number(Slider.value)), 0, 0);
    }
    else if(Filter === 'BoxBlur'){
        MainContext.putImageData(BoxBlurFilter(imageData, Number(Slider.value)), 0, 0);
    }
    else if(Filter === 'GaussianBlur'){
        MainContext.putImageData(GaussianBlur(imageData, Number(Slider.value)), 0, 0);
    }
    else if(Filter === 'Sharp'){
        MainContext.putImageData(SharpnessFilter(imageData, Number(Slider.value)), 0, 0);
    }
    else if(Filter === 'Contrast'){
        MainContext.putImageData(ContrastFilter(imageData, Number(Slider.value)), 0, 0);
    }
    else if(Filter === 'Greyscale'){
        MainContext.putImageData(GreyScaleFilter(imageData, Number(Slider.value)), 0, 0);
    }
}

Buttons

Lastly, you will need to create two buttons. One for applying the filters on the image, and the other to download the image with filters applied on it.

<!-- HTML -->
<a>
   <Button id="Btn" class="btn btn__secondary"><p>Apply</p></Button>
</a>
<a id="download" download="Image.png">
   <Button id="DownloadBtn" class="btn btn__primary"><p>Download</p></Button>
</a>

Then add some javascript.

//JavaScript
const ApplyBtn = document.getElementById('ApplyBtn');
const DownloadBtn = document.getElementById('DownloadBtn');

ApplyBtn.onclick = () => {
    const imageData = MainContext.getImageData(0, 0, MainCanvas.width, MainCanvas.height);
    ImgContext.putImageData(imageData, 0, 0);
}

DownloadBtn.onclick = () => {
    var download = document.getElementById("download");
    var image = ImgCanvas.toDataURL("image/png");
    download.setAttribute("href", image);
}

Result

CodePen: Image Processing (Filters)

Also Read
3D Product Card With ReactJS

Kindly follow me on
LinkedIn
GitHub
CodePen

3D Product Card With ReactJS

Mohamed Soliman — Fri, 17 Feb 2023 07:34:07 +0000

In this article, we will create a 3D model of a product and render it inside of a product card. By the end of this article, you will be able to render 3D models in your website.

Download a 3D model

First, You will need to get a 3D model either by creating it by using 3D apps, or by downloading them from the internet. I have chosen the easy way and downloaded them for free from open3dmodel.com. Make sure it has glb file extension. If it doesn't have glb file extension we can use Blender to export it as glb.

glb is a binary container format of gltf which makes it more lightweight in the terms of size than gltf and other 3D model extensions. That's make it easier to load and render in websites.

I have downloaded a model of converse shoe that looks like that:

Setting up the environment

First, we need to create a new React application.

npx create-react-app 3d-product

Then, we need to install the dependencies that we will use in this project. We will use Three.js library, @react-three/fiber and @react-three/drei.

we can install them with npm

npm install three @react-three/fiber @react-three/drei

or by using yarn

yarn install three @react-three/fiber @react-three/drei

Three.js is used to make a 3D scene, and @react-three/fiber is used to re-render models in the scene. While @react-three/drei is a collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber

Making a React component of the model

After installing the dependencies, we will need to covert the glb file into a reusable react component. we can easily do that by just running this command in the directory that contains the glb file:

npx gltfjsx model.glb

After running this command, new JavaScript file will be generated. It would be something like that:

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export function Model(props) {
  const { nodes, materials } = useGLTF('/model.glb')
  return (
    <group {...props} dispose={null}>
      <group position={[0.67, -1.61, 3]} rotation={[Math.PI / 2, 0, 0]} scale={0.1}>
        <group position={[-37.27, -6.54, 0.15]} rotation={[1.57, -0.02, 3.13]}>
          <group position={[-25.76, -1.15, 0]}>
            <mesh geometry={nodes.Outsole_1.geometry} material={materials['706a6a']} position={[-0.19, 3.95, -5.76]} rotation={[0, 0, -3.14]} scale={[-0.98, -0.89, -0.98]} />
            <mesh geometry={nodes.Plate.geometry} material={materials.Physical10} />
            <mesh geometry={nodes.Toe.geometry} material={nodes.Toe.material} />
            <mesh geometry={nodes._polySurface204.geometry} material={nodes._polySurface204.material} />
            <mesh geometry={nodes._polySurface205.geometry} material={materials.fef7f7} position={[40.76, 12.34, -22.15]} />
            <mesh geometry={nodes.Above.geometry} material={materials.Standard5} />
            <mesh geometry={nodes.Below.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.Stripe.geometry} material={materials.Standard6} />
          </group>
          <group position={[-25.76, -1.15, 0]}>
            <group position={[-20.21, 47.7, -0.77]}>
              <mesh geometry={nodes.Tongue_2.geometry} material={materials.Physical9} position={[20.21, -48.47, 0.65]} />
              <mesh geometry={nodes.Tongue_Binding.geometry} material={materials.Physical12} position={[20.21, -48.47, 0.65]} />
              <mesh geometry={nodes.Tongue_Lining.geometry} material={materials.d3ebc} position={[20.21, -48.47, 0.65]} />
            </group>
            <mesh geometry={nodes.Binding.geometry} material={materials.Physical7} />
            <mesh geometry={nodes.Insole.geometry} material={materials.Physical15} />
            <mesh geometry={nodes.Lining.geometry} material={materials.Physical11} />
            <mesh geometry={nodes.Tag.geometry} material={materials.ffffff} position={[-15.88, 44.52, -24.34]} />
            <mesh geometry={nodes.Vamp.geometry} material={nodes.Vamp.material} />
            <mesh geometry={nodes.Plugs.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.polySurface381.geometry} material={materials.b0b0b0} position={[9.17, 63.25, -14.78]} />
            <mesh geometry={nodes.polySurface382.geometry} material={materials.b0b0b0} position={[-9.44, 55.79, -14.22]} />
            <mesh geometry={nodes.polySurface383.geometry} material={materials.b0b0b0} position={[-18.66, 52.34, -13.55]} />
            <mesh geometry={nodes.polySurface384.geometry} material={materials.b0b0b0} position={[-27.95, 48.98, -12.7]} />
            <mesh geometry={nodes.polySurface385.geometry} material={materials.b0b0b0} position={[7.41, 65.1, 14.03]} />
            <mesh geometry={nodes.polySurface386.geometry} material={materials.b0b0b0} position={[-11.22, 58.21, 12.89]} />
            <mesh geometry={nodes.polySurface387.geometry} material={materials.b0b0b0} position={[-1.43, 61.81, 13.27]} />
            <mesh geometry={nodes.polySurface388.geometry} material={materials.b0b0b0} position={[-20.21, 54.94, 12.28]} />
            <mesh geometry={nodes.polySurface389.geometry} material={materials.b0b0b0} position={[-29.67, 51.27, 11.98]} />
            <mesh geometry={nodes.polySurface390.geometry} material={materials.b0b0b0} position={[-0.28, 59.54, -14.63]} />
            <mesh geometry={nodes.polySurface370.geometry} material={materials.b0b0b0} position={[109.3, 61.76, -0.46]} />
            <mesh geometry={nodes.polySurface392.geometry} material={materials.b0b0b0} position={[92.65, 44.44, -0.95]} />
            <mesh geometry={nodes.Lace_1_1.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.Lace_2.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.Lace_3.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.Lace_4.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.Lace_5.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.Lace_6.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.Lace_7.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes._polySurface207.geometry} material={materials.Physical2} />
            <mesh geometry={nodes.polySurface394.geometry} material={materials.Physical1} />
            <mesh geometry={nodes.pasted__stitch24.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.pasted__stitch25.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.pasted__stitch26.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.pasted__stitch27.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.stitch.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.stitch10.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.stitch11.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.stitch14.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.stitch15.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.stitch16.geometry} material={materials.b0b0b0} position={[-21.2, 47.81, -1.23]} />
            <mesh geometry={nodes.stitch17.geometry} material={materials.b0b0b0} position={[0, -0.77, -0.12]} />
            <mesh geometry={nodes.stitch18.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.stitch19.geometry} material={materials.b0b0b0} />
            <mesh geometry={nodes.stitch20.geometry} material={materials.b0b0b0} />
          </group>
        </group>
      </group>
    </group>
  )
}

useGLTF.preload('/model.glb')

P.S. Each model has it's own unique code structure. So do not panic if your generated code does not look like mine.

Then you will have to move the glb file into public directory to make it accessible for React.

Designing the scene

In order to design a 3D scene, you will need to add a camera, light and the model to the scene. you need to edit App.js and make it look like this:

import './App.css';
import { React, Suspense } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import { Model } from './Model';

function App() {
  return (
    <div className='App'>
      <Canvas
          camera={{ position: [100, 80, 50], fov: 11 }}
          style={{
          width: '20vw',
          height: '38vh',
          border: '1px solid black'
          }}
      >
          <ambientLight intensity={1.25} />
          <directionalLight position={[0,-2,0]} intensity={2} />
          <directionalLight position={[0,2,0]} intensity={2} />
          <directionalLight position={[-2,0,0]} intensity={2} />
          <directionalLight position={[2,0,0]} intensity={2} />

          <Suspense fallback={null}>
          <Model position={[0, 0, 0]} />
          </Suspense>
          <OrbitControls enableZoom={false}/>
      </Canvas>
    </div>
  );
}

export default App;

P.S. Each model have a different scale size, so the previous variables might not be suitable for all models.

To overcome this issue you will need to modify camera position and field of view (fov). Also, if your scene is too bright or dark you will have to modify the light intensity.

Also, if you want to enable zoom functionality you will have to replace enableZoom in OrbitControls with minDistance={} and maxDistance={}. Again, you will need to enter values according to model scale.

Then, you will need to edit App.css to make the scene in the middle of the screen.

body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

After adding the CSS, your website will look like this:

Designing the product card

You are free to design any UI/UX you think it's suitable for the project. I have decided to use nuemorphic design by the artist Maria Marin.

Result

Finally, lets run the project by using this command:

npm start

My product card looked like this:

Github: 3D-Product-Card
P.S. You will have to view it in fullscreen desktop mode because it's not responsive yet.

Also Read
Image Processing with JavaScript

Kindly follow me on
LinkedIn
GitHub
CodePen