Image Editor Transformations

Overview


Filter


The code for converting image to black and white is as follows: 

async function(context,img){
		
	let imgData = context.getImageData(img.imageX, img.imageY, img.imageWidth, img.imageHeight);
  let data = imgData.data;
  let image2 = context.createImageData(imgData);
  let data2 = image2.data;
  for (var i = 0, n = data.length; i < n; i += 4) {
    let red = data[i];
    let green = data[i + 1];
    let blue = data[i + 2];
    let alpha = data[i + 3]; 
    let average = (red+green+blue)/3;
    //set the new values here
    data2[i] = average;
    data2[i + 1] =  average;
    data2[i + 2] =  average;
    data2[i + 3] = alpha+1;
  }
  context.putImageData(image2, img.imageX, img.imageY);	
}

Filter Library


The black and white filter is coded in the image filters library. 

async function(context,img){
  let fl = await import('/lib/image/v1.0.0/filters.mjs');
  let imgData = context.getImageData(img.imageX, img.imageY, img.imageWidth, img.imageHeight);
  let data = imgData.data;
  let image2 = context.createImageData(imgData);
  let data2 = image2.data;
  fl.blackWhite(data,data2);
  context.putImageData(image2, img.imageX, img.imageY);	
}

Contents