histogram/example.html at master · component/histogram · 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
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
97
<!DOCTYPE html>
<html>
<head>
  <title>Histogram</title>
  <style>
    body {
      padding: 80px;
      font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    img {
      float: left;
      clear: both;
    }
    canvas {
      margin-bottom: 100px;
      float: left;
      clear: both;
    }
    .histogram {
      /*background: #1a1a1a;*/
      border-color: #1a1a1a;
    }
    .histogram .channel {
      opacity: .4;
    }
    .histogram .red {
      color: #dc1e1a;
    }
    .histogram .green {
      color: #12b81c;
    }
    .histogram .blue {
      color: #46a3d6;
    }
    #drop {
      width: 300px;
      height: 200px;
      line-height: 200px;
      text-align: center;
      border: 1px dashed #ddd;
      margin: 40px 0;
    }
    #drop.over {
      border-color: black;
    }
    img {
      width: 400px;
    }
  </style>
</head>
<body>
  <h1>Histogram</h1>
  <p>JavaScript image <a href="https://github.com/component/histogram">histogram</a> library using HTML canvas.</p>
  <script src="build/build.js"></script>

  <div id="drop">Drag and drop image(s)</div>

  <script>
    var Dropload = require('component-dropload');
    var File = require('component-file');
    var histogram = require('histogram');
    var autoscale = require('component-autoscale-canvas');

    var drop = new Dropload(document.querySelector('#drop'));

    drop.on('upload', function(upload){
      var file = File(upload.file);
      file.toDataURL(function(err, uri){
        var img = new Image;
        img.src = uri;
        img.onload = function(){
          display(img);
        };
      })
    });

    function display(img){
      var canvas = document.createElement('canvas');
      canvas.width = 400;
      canvas.height = 100;
      autoscale(canvas);
      var start = new Date;
      histogram(img).smooth().draw(canvas);
      console.log('%dms', new Date - start);
      document.body.appendChild(img);
      document.body.appendChild(canvas);
    }

    function graph(src, fn) {
      var img = document.createElement('img');
      img.style.width = '400px';
      img.onload = function(){ fn(img) }
      img.src = src;
    }
  </script>
</body>
</html>