grafi-convolution/example.html at master · grafijs/grafi-convolution · 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
<html>
  <input type="file" id="input" onchange="reader.readAsDataURL(this.files[0])">
  <h1>original</h1>
  <img id="original">
  <h1>processed</h1>
  <canvas id="canvas"></canvas>
  <script src="grafi-convolution.js"></script>
  <script>
    var original = document.getElementById('original')
    var output = document.getElementById('canvas')
    var outputCtx = output.getContext('2d')
    var reader = new FileReader()
    reader.onload = function() {
      original.src = reader.result
    }
    original.onload = function () {
      output.width = original.width
      output.height = original.height
      outputCtx.drawImage(original, 0, 0)
      // var f = [1,2,1,2,4,2,1,2,1]
      // var d = 16
      var f = [0,-2,0,-2,9,-2,0,-2,0]
      var d = 1
      var r = 1
      newImage = grafi.convolution(outputCtx.getImageData(0, 0, original.width, original.height), {filter: f, divisor: d, radius: r, monochrome:true})
      outputCtx.putImageData(newImage, 0, 0)
      console.log(newImage.data)
    }
  </script>

</hmtl>