Image Processing With NodeJS

Needed Packages

jimp
matrixjs-core / https://www.npmjs.com/package/matrixjs-core
electron
Lets import and take context object

Note:

matrixjs-core provides us only one channel because I am still developing it

const {Matrix} = require("matrixjs-core")
const {ipcRenderer}= require("electron")
const canvas=document.getElementById("canvas");
const jimp=require("jimp")
const canvasViewer=document.getElementById("canvasViewer");

const canvasViewerCtx=canvasViewer.getContext("2d",{
  willReadFrequently:true
});

const ctx=canvas.getContext("2d",{
  willReadFrequently:true
});

const grabImage=(ctx)=>{

  const imageData=ctx.getImageData(0,0,1024,768);
  const dataArray = imageData.data
  const  rgbArray = []
  let row=[]
  let c=0;
  for (var i = 0; i < dataArray.length; i+=4) {
      c++;
      row.push(dataArray[i]*0.3+dataArray[i+1]*0.59+dataArray[i+2]*0.11)
      if(c===1024){
         rgbArray.push(row)
         row=[]
         c=0;
      }
  }
  const mat=new Matrix(rgbArray,"UInt8");
  return mat;
}

You can see grabImage converted to gray scale

const showImage=(frame)=>{
  const flatted=frame.clone().flat();
  const imageData=canvasViewerCtx.getImageData(0,0,frame.getX(),frame.getY());
  const data = imageData.data
  let k=0;
  for(let i=0;i<data.length;i+=4){
    data[i]=flatted[k]
    data[i+1]=flatted[k]
    data[i+2]=flatted[k]
    data[i+3]=255
    k++;
  }

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

You can show matrixjs-core matrix by using this function

const toJimpImage=(frame)=>{
  const array=frame.clone()
  const test=new jimp(frame.getX(),frame.getY());
  const bitmap=test.bitmap;
  const flatted=array.flat();
  let i=0;
  test.scan(0, 0, frame.getX(),frame.getY(), function (_x,_y, idx) {

      bitmap.data[idx + 0] = flatted[i]
      bitmap.data[idx + 1] = flatted[i]
      bitmap.data[idx + 2] = flatted[i]
      bitmap.data[idx + 3] = 255
      i++;
     })
  return test; 
}

toJimpImage provides you to convert jimp image format

const jimpImageToMatrix=(image,dataType,gray=true)=>{
  let row=[]
  const myarray=[]
  let k=0;


  image.scan(0, 0, image.bitmap.width, image.bitmap.height, function (x, y, idx) {
      if(gray)
       row.push(image.bitmap.data[idx + 0]);
      k++;
      if(k===image.bitmap.width){
          myarray.push(row);
          k=0;
          row=[]
      }

  })
  return new Matrix(myarray,dataType);

}

jimpImageToMatrix provides you to convert matrixjs-core matrix

ipcRenderer.on("SET_SOURCE",async (sourceId)=>{
  navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      deviceId:sourceId,
      aspectRatio:4/3
    },
  }).then((stream)=>{
    const video=document.getElementById("video");
    video.srcObject=stream;

    const renderer=()=>{
      ctx.drawImage(video,0,0,1024,768)
      const frame=grabImage(ctx);
      const jimpImage=toJimpImage(frame).blur(3)
      const blur=jimpImageToMatrix(jimpImage,"UInt8")

      showImage(blur.transpose())
      window.requestAnimationFrame(renderer);
    }
    renderer();
  })
})

Finally, I converted gray scale

const blur=jimpImageToMatrix(jimpImage,"UInt8")

This adds blur

const blur=jimpImageToMatrix(jimpImage,"UInt8")

showImage(blur.transpose())

With this code lines, After I converted to matrixjs-core format and showed the image.

https://github.com/gokhanergen-tech/Image-Processing-With-NodeJS