Skip to content

Instantly share code, notes, and snippets.

@skyl skyl/gist:1422095
Created Dec 2, 2011

Embed
What would you like to do?
canvas img linear filter in coffeescript
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.