image.js/convolution.html at master · yoya/image.js · 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<html>
<head>
  <meta name="copyright" content="Copyright &copy; 2017/04/02- yoya@awm.jp . All Rights Reserved.">
  <meta charset="utf-8">
  <title> Convolution </title>
<link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="container">
    <div>
      <div id="controlPanel" style="float:left">
        Convolution Filter:  <br />
	<div style="float:left">
          <select id="filterSelect" size="8">
            <option value="smoothing" selected> 平滑化 </option>
	    <option value="smoothing2"        > 平滑化2(横) </option>
	    <option value="smoothing3"        > 平滑化3(斜め) </option>
	    <option value="smoothing4"        > 平滑化4(縦) </option>
	    <option value="gaussian3x3"       > ガウシアン3x3 </option>
	    <option value="gaussian5x5"       > ガウシアン5x5 </option>
	    <option value="gaussian7x7"       > ガウシアン7x7 </option>
	    <option value="differential"      > 微分</option>
            <option value="differentialHoli"  > 微分(横) </option>
	    <option value="differentialVert"  > 微分(縦) </option>
	    <option value="laplacian1"        > ラプラシアン1 </option>
	    <option value="laplacian2"        > ラプラシアン2 </option>
	    <option value="edge1"             > エッジ1 </option>
	    <option value="edge2"             > エッジ2 </option>
	    <option value="sharpening0.5"     > 先鋭化0.5 </option>
	    <option value="sharpening1"       > 先鋭化1 </option>
	    <option value="sharpening1.25"    > 先鋭化1.25 </option>
	    <option value="sharpening1.5"     > 先鋭化1.5 </option>
	    <option value="sharpening1.75"    > 先鋭化1.75 </option>
	    <option value="sharpening2"       > 先鋭化2 </option>
	    <option value="emboss"            > エンボス </option>
            <option value="prewitt1"          > プレビット(横) </option>
            <option value="prewitt2"          > プレビット(縦) </option>
	    <option value="prewitt3"          > プレビット(実験) </option>
            <option value="sobel1"            > ゾーベル(横) </option>
	    <option value="sobel2"            > ゾーベル(縦) </option>
	    <option value="sobel3"            > ゾーベル(実験) </option>
          </select>
	</div>
      </div> filterMatrix:<table id="filterMatrixTable"> </table>
    </div>
    <div>
      filterWindow:<input id="filterWindowRange" type="range" min="1" max="9" step="2" value="3">:<input type="text" id="filterWindowText" size="3">
      matrix-normalize:<input id="matrixNormalizeCheckbox" type="checkbox" />
      matrix-zero-centering:<input id="matrixZerocenteringCheckbox" type="checkbox" />
      <br />
      maxWidthHeight:<input id="maxWidthHeightRange" type="range" min="16" max="2048" step="1" value="640">:<input type="text" id="maxWidthHeightText" size="5">
      linearRGB:<input id="linearRGBCheckbox" type="checkbox" />
      image-normalize:<input id="imageNormalizeCheckbox" type="checkbox" />
    </div>
  </div>
  <div style="clear:both">
    <canvas id="srcCanvas" class="borderRed" width=200 height=200> srcCanvas </canvas>
    <canvas id="dstCanvas" class="borderBlue" width=200 height=200> dstCanvas </canvas>
  </div>
  <script type="text/javascript" src="lib/drop.js"> </script>
  <script type="text/javascript" src="lib/bind.js"> </script>
  <script type="text/javascript" src="lib/canvas.js"> </script>
  <script type="text/javascript" src="lib/loading.js"> </script>
  <script type="text/javascript" src="lib/worker.js"> </script>
  <script type="text/javascript" src="convolution.js"> </script>
</body>
</html>