Image Editor Transformations

Overview


Adding a Filter


The HTML canvas comes with a set of predefined transforms that can be applied by setting the filter property on the context object. (see context filter) 

async function(context,img){
  context.filter = "blur(4px)"
  context.drawImage(that.image.imageObj, that.image.imageX, that.image.imageY, that.image.imageWidth, that.image.imageHeight);
}

Manipulating Pixels


Pixels can be manipulated individually. The following script iterates over the set of pixels in the image and sets the pixels values to the old values plus 1. 

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]; 
    //set the new values here
    data2[i] = red + 1;
    data2[i + 1] = green+1;
    data2[i + 2] = blue+1;
    data2[i + 3] = alpha+1;
  }
  context.putImageData(image2, img.imageX, img.imageY);	
}

Examples


Contents