grafi/example.html at master · cthedot/grafi · GitHub

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
<html>
<input type="file" id="input" onchange="reader.readAsDataURL(this.files[0])">
<h1>original</h1>
<img id="original">
<h1>processed</h1>
<canvas id="canvas" hidden></canvas>
<canvas id="output"></canvas>
<script src="grafi.js"></script>
<script>
  var original = document.getElementById('original')
  var canvas = document.getElementById('canvas')
  var output = document.getElementById('output')
  var cCtx = canvas.getContext('2d')
  var oCtx = output.getContext('2d')
  var reader = new FileReader()

  function setUpCanvas() {
    output.width = original.width
    output.height = original.height
    canvas.width = original.width
    canvas.height = original.height
    cCtx.drawImage(original, 0, 0)
  }

  function border() {
    var imagedata = cCtx.getImageData(0, 0, original.width, original.height)
    var newImage =
      grafi.contrast(
        grafi.invert(
          grafi.contrast(imagedata, {
            level: 2
          })
        ), {
          level: 2
        })

    /*var newImage =
          grafi.grayscale(imagedata, {
            mode: 'simple', channel: 0
          })*/

    oCtx.putImageData(newImage, 0, 0)
  }
  reader.onload = function() {
    original.src = reader.result
  }
  original.onload = function() {
    setUpCanvas()
    border()
  }
</script>

</hmtl>