-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
96 lines (82 loc) · 2.49 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// FILTERS
var filters = {
// BOX BLUR
blur: [ [1,1,1,1,1], [1,1,1,1,1], [1,1,1,1,1], [1,1,1,1,1], [1,1,1,1,1] ]
.map( function( a ) {
return a.map( function( d ) {
return d / 25 }) }),
// EDGE DETECT
edgeDetect: [ [ -1, -1, -1 ], [ -1, 8, -1 ], [ -1, -1, -1 ] ],
// EMBOSS
emboss: [ [ -2, -1, 0 ], [ -1, 1, 1 ], [ 0, 1, 2 ] ],
// GAUSSIAN BLUR
gaussian: [ [ 1, 4, 6, 4, 1 ], [ 4, 16, 24, 16, 4 ], [ 6, 24, 36, 24, 6], [ 4, 16, 24, 16, 4 ], [ 1, 4, 6, 4, 1 ] ]
.map( function( a ) {
return a.map( function( d ) {
return d / 256 }) }),
// IDENTITY
identity: [ [ 1 ] ],
// SHARPEN
sharpen: [ [ 0, -1, 0 ], [ -1, 5, -1 ], [ 0, -1, 0 ] ],
// UNSHARP MASK
unsharp: [ [ 1, 4, 6, 4, 1 ], [ 4, 16, 24, 16, 4 ], [ 6, 24, -476, 24, 6], [ 4, 16, 24, 16, 4 ], [ 1, 4, 6, 4, 1 ] ]
.map( function( a ) {
return a.map( function( d ) {
return -1 * d / 256 }) })
}
function drawImage( filter, cb )
{
canvas.width = img.width
canvas.height = img.height
context.drawImage( img, 0, 0 )
var imageData = context.getImageData( 0, 0, img.width, img.height )
setTimeout( function() {
var start = new Date
imageData = applyFilter( imageData, filter )
console.log("FILTER TIME", ((new Date) - start ) / 1000 + "s" )
context.putImageData( imageData, 0, 0 )
cb()
})
}
function setFilter( filter )
{
byId( "filters").setAttribute( "disabled", "1" )
byId( "apply").setAttribute( "disabled", "1" )
drawImage( filter, function() {
byId( "filters").removeAttribute( "disabled" )
byId( "apply").removeAttribute( "disabled" )
})
}
function setPresetFilter( filterName )
{
var filter = filters[ filterName ]
setFilter( filter )
var i0 = ( 5 - filter.length ) / 2
for ( var i = 0; i < 5; i++ )
for ( var j = 0; j < 5; j++ ) {
var v = 0
if ( filter[ i - i0 ] && filter[ i - i0 ][ j - i0 ] )
v = filter[ i - i0 ][ j - i0 ]
byId( "a" + i + j ).value = v
}
}
function setCustomFilter()
{
var filter = []
for ( var i = 0; i < 5; i++ )
for ( var j = 0; j < 5; j++ ) {
filter[i] = filter[i] || []
filter[i][j] = +byId( "a" + i + j ).value
}
setFilter( filter )
}
function reset()
{
setPresetFilter( byId( "filters").value )
}
var byId = function( id ) { return document.getElementById( id ) }
var canvas = byId("canvas")
var context = canvas.getContext("2d")
var img = document.createElement("img")
img.onload = function() { setPresetFilter( "identity" ) }
img.src = "library.jpg"