robert-ro / blog Goto Github PK

// use canvas
ctx.getImageData(0, 0, img.width, img.height): ImageData
interface ImageData {
    /**
     * Returns the one-dimensional array containing the data in RGBA order, as integers in the range 0 to 255.
     */
    readonly data: Uint8ClampedArray;
    /**
     * Returns the actual dimensions of the data in the ImageData object, in pixels.
     */
    readonly height: number;
    /**
     * Returns the actual dimensions of the data in the ImageData object, in pixels.
     */
    readonly width: number;
}

for(var Pixel in Image){
  var Red = Image[Pixel].Red
  var Green = Image[Pixel].Green
  var Blue = Image[Pixel].Blue

  var Gray = (Red + Green + Blue) / 3

  Image[Pixel].Red = Gray
  Image[Pixel].Green = Gray
  Image[Pixel].Blue = Gray
}

Gray = (Red + Green + Blue) / 3 

Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11)
Gray = (Red * 0.2126 + Green * 0.7152 + Blue * 0.0722)
Gray = (Red * 0.299 + Green * 0.587 + Blue * 0.114)

Gray = ( Math.max(Red, Green, Blue) + Math.min(Red, Green, Blue) ) / 2

Gray = Math.max(Red, Green, Blue)
Gray = Math.min(Red, Green, Blue)

Gray = Red
Gray = Blue
Gray = Green

const NumberOfShades  = [2, 256]
ConversionFactor = 255 / (NumberOfShades - 1)
AverageValue = (Red + Green + Blue) / 3
Gray = Math.round((AverageValue / ConversionFactor) + 0.5) * ConversionFactor