src/canvas-filters.js
function canvasFilters(canvas, settings) {
    settings = Object.assign({}, {
        smoothing   : false,  // Smoothing [true|fale]
        brightness  : 0,      // Image brightness [-255 to +255]
        contrast    : 0,      // Image contrast [-255 to +255]
        gamma       : 0,      // Image gamma correction [0.01 to 7.99]
        grayscale   : 'none', // Graysale algorithm [average, luma, luma-601, luma-709, luma-240, desaturation, decomposition-[min|max], [red|green|blue]-chanel]
        shadesOfGray: 256,    // Number of shades of gray [2-256]
        invertColor : false   // Invert color...
    }, settings || {})

    // Get canvas 2d context
    let context = canvas.getContext('2d')

    // Smoothing
    if (context.imageSmoothingEnabled !== undefined) {
        context.imageSmoothingEnabled = settings.smoothing
    }
    else {
        context.mozImageSmoothingEnabled    = settings.smoothing
        context.webkitImageSmoothingEnabled = settings.smoothing
        context.msImageSmoothingEnabled     = settings.smoothing
        context.oImageSmoothingEnabled      = settings.smoothing
    }

    // Get image data
    let imageData = context.getImageData(0, 0, canvas.width, canvas.height)
    let data      = imageData.data

    let contrastFactor, brightnessOffset, gammaCorrection, shadesOfGrayFactor

    if (settings.contrast !== 0) {
        contrastFactor = (259 * (settings.contrast + 255)) / (255 * (259 - settings.contrast))
    }

    if (settings.brightness !== 0) {
        brightnessOffset = settings.brightness
    }

    if (settings.gamma !== 0) {
        gammaCorrection = 1 / settings.gamma
    }

    // Shades of gray
    if (settings.shadesOfGray > 1 && settings.shadesOfGray < 256) {
        shadesOfGrayFactor = 255 / (settings.shadesOfGray - 1)
    }

    // For each pixel
    for (let i = 0, il = data.length; i < il; i += 4) {
        // Apply filters
        invertColor(data, i, settings.invertColor)
        brightness(data, i, brightnessOffset)
        contrast(data, i, contrastFactor)
        gamma(data, i, gammaCorrection)
        grayscale(data, i, settings.grayscale, shadesOfGrayFactor)
    }

    // Write new image data on the context
    context.putImageData(imageData, 0, 0)
}
function canvasFilters(canvas, settings) {
    settings = Object.assign({}, {
        smoothing   : false,  // Smoothing [true|fale]
        brightness  : 0,      // Image brightness [-255 to +255]
        contrast    : 0,      // Image contrast [-255 to +255]
        gamma       : 0,      // Image gamma correction [0.01 to 7.99]
        grayscale   : 'none', // Graysale algorithm [average, luma, luma-601, luma-709, luma-240, desaturation, decomposition-[min|max], [red|green|blue]-chanel]
        shadesOfGray: 256,    // Number of shades of gray [2-256]
        invertColor : false   // Invert color...
    }, settings || {})

    // Get canvas 2d context
    let context = canvas.getContext('2d')

    // Smoothing
    if (context.imageSmoothingEnabled !== undefined) {
        context.imageSmoothingEnabled = settings.smoothing
    }
    else {
        context.mozImageSmoothingEnabled    = settings.smoothing
        context.webkitImageSmoothingEnabled = settings.smoothing
        context.msImageSmoothingEnabled     = settings.smoothing
        context.oImageSmoothingEnabled      = settings.smoothing
    }

    // Get image data
    let imageData = context.getImageData(0, 0, canvas.width, canvas.height)
    let data      = imageData.data

    let contrastFactor, brightnessOffset, gammaCorrection, shadesOfGrayFactor

    if (settings.contrast !== 0) {
        contrastFactor = (259 * (settings.contrast + 255)) / (255 * (259 - settings.contrast))
    }

    if (settings.brightness !== 0) {
        brightnessOffset = settings.brightness
    }

    if (settings.gamma !== 0) {
        gammaCorrection = 1 / settings.gamma
    }

    // Shades of gray
    if (settings.shadesOfGray > 1 && settings.shadesOfGray < 256) {
        shadesOfGrayFactor = 255 / (settings.shadesOfGray - 1)
    }

    // For each pixel
    for (let i = 0, il = data.length; i < il; i += 4) {
        // Apply filters
        invertColor(data, i, settings.invertColor)
        brightness(data, i, brightnessOffset)
        contrast(data, i, contrastFactor)
        gamma(data, i, gammaCorrection)
        grayscale(data, i, settings.grayscale, shadesOfGrayFactor)
    }

    // Write new image data on the context
    context.putImageData(imageData, 0, 0)
}
function canvasFilters ( canvas , settings ) { settings = Object . assign ( { } , { smoothing : false , // Smoothing [true|fale] brightness : 0 , // Image brightness [-255 to +255] contrast : 0 , // Image contrast [-255 to +255] gamma : 0 , // Image gamma correction [0.01 to 7.99] grayscale : 'none' , // Graysale algorithm [average, luma, luma-601, luma-709, luma-240, desaturation, decomposition-[min|max], [red|green|blue]-chanel] shadesOfGray : 256 , // Number of shades of gray [2-256] invertColor : false // Invert color... } , settings || { } ) // Get canvas 2d context let context = canvas . getContext ( '2d' ) // Smoothing if ( context . imageSmoothingEnabled !== undefined ) { context . imageSmoothingEnabled = settings . smoothing } else { context . mozImageSmoothingEnabled = settings . smoothing context . webkitImageSmoothingEnabled = settings . smoothing context . msImageSmoothingEnabled = settings . smoothing context . oImageSmoothingEnabled = settings . smoothing } // Get image data let imageData = context . getImageData ( 0 , 0 , canvas . width , canvas . height ) let data = imageData . data let contrastFactor , brightnessOffset , gammaCorrection , shadesOfGrayFactor if ( settings . contrast !== 0 ) { contrastFactor = ( 259 * ( settings . contrast + 255 ) ) / ( 255 * ( 259 - settings . contrast ) ) } if ( settings . brightness !== 0 ) { brightnessOffset = settings . brightness } if ( settings . gamma !== 0 ) { gammaCorrection = 1 / settings . gamma } // Shades of gray if ( settings . shadesOfGray > 1 && settings . shadesOfGray < 256 ) { shadesOfGrayFactor = 255 / ( settings . shadesOfGray - 1 ) } // For each pixel for ( let i = 0 , il = data . length ; i < il ; i += 4 ) { // Apply filters invertColor ( data , i , settings . invertColor ) brightness ( data , i , brightnessOffset ) contrast ( data , i , contrastFactor ) gamma ( data , i , gammaCorrection ) grayscale ( data , i , settings . grayscale , shadesOfGrayFactor ) } // Write new image data on the context context . putImageData ( imageData , 0 , 0 ) }
Apply filters on provided canvas
Apply filters on provided canvas