canvas img linear filter in coffeescript

gistfile1.coffee

minmax = (value, low, high) -> Math.min Math.max(low, value), high


class ImageProcessor
  constructor: (@img, parent=document.body) ->
    @canvas = document.createElement("canvas")
    @context = @canvas.getContext("2d")
    @canvas.width = @img.width
    @canvas.height = @img.height
    parent.appendChild @canvas
    @redraw_original()

  redraw_original: () ->
    @context.drawImage @img, 0, 0

  draw_horizontal_filter: () ->
    # find vertical edges and draw
    imageData = @context.getImageData(0, 0, @canvas.width, @canvas.height)
    data = imageData.data
    i = 0
    while i <= data.length
      next = (data[i+4] + data[i+5] + data[i+6])
      here = (data[i] + data[i+1] + data[i+2])
      val = minmax Math.abs(here - next), 0, 255
      data[i] = data[i+1] = data[i+2] = val
      #data[i+3] = val
      i += 4
    @context.putImageData(imageData, 0, 0)

  draw_edges: () ->
    imageData = @context.getImageData(0, 0, @canvas.width, @canvas.height)
    data = imageData.data
    w = @img.width * 4
    i = 0
    while i <= data.length
      here = data[i] + data[i+1] + data[i+2]
      xi = data[i+4] + data[i+5] + data[i+6]
      yi = data[i+w] + data[i+1+w] + data[i+2+w]
      val = Math.sqrt(Math.pow(xi - here, 2) + Math.pow(yi - here, 2))
      data[i] = data[i+1] = data[i+2] = minmax val, 0, 255
      i += 4
    @context.putImageData imageData, 0, 0



# sample usage

window.onload = () ->
  img = document.getElementById "passion-flower"
  window.ip = new ImageProcessor img
  ip.draw_edges()
  # ip.draw_horizontal_filter()
  # Canvas2Image.saveAsPNG ip.canvas