landsat-alpha-masking.js

const canvas = document.querySelector('canvas')
const context = canvas.getContext('2d')

const LIGHTNESS_THRESHOLD = 1

const image = new Image()
image.crossOrigin = 'Anonymous'

image.addEventListener('load', () => {
  context.drawImage(image, 0, 0, canvas.width, canvas.height)

  const byteSlice = context.getImageData(0, 0, canvas.width, canvas.height)

  const {data} = byteSlice
  console.log(data.length)

  for (let i = 0, N=data.length; i < N; i += 4) {
    const red = data[i]
    const green = data[i + 1]
    const blue = data[i + 2]
    const alpha = data[i + 3]
    if (red < LIGHTNESS_THRESHOLD && green < LIGHTNESS_THRESHOLD && blue < LIGHTNESS_THRESHOLD) {
      data[i + 3] = 0  // Transparentize
    }
  }

  context.putImageData(byteSlice, 0, 0)  
})

image.src = 'http://landsat-pds.s3.amazonaws.com/L8/109/072/LC81090722016155LGN00/LC81090722016155LGN00_thumb_large.jpg'