-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
137 lines (116 loc) · 4.96 KB
/
demo.html
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<html>
<head>
<meta charset="UTF-8">
<title>divify</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="divify.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link href="demo.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>divify</h1>
<p>Here I present <span class="tool">divify</span>, a JavaScript
tool for pixelating an image into a grid of divs. It works by
converting the image into a div containing a sequence of child
pixel divs, each left-floated and with its background color set to
the average color from that area of the original image. The width
of the parent div is then set to the width of the original image,
making them all line up correctly. Why exactly would we want to do
this? I'm not not entirely sure. If you can think of any vaguely
useful application, I'm all ears.</p>
<p>So without further ado, here is an image loaded onto a canvas:</p>
<canvas id="original" class="demo-pix"></canvas>
<p>And here is a pixelated version using <span class="tool">divify</span>:</p>
<div id="pix1" class="demo-pix"></div>
<p><span class="tool">divify</span> makes use of the canvas,
which, once loaded with an image, can be used to extract the
RGBA values for each pixel like so:</p>
<div class="code">
<ul>
<li>var canvas = document.createElement('canvas');</li>
<li>var img = new Image(); </li>
<li>img.src = url;</li>
<li>img.onload = function() {</li>
<li class="indent1"></li>
<li class="indent1">var context = canvas.getContext('2d');</li>
<li class="indent1">var imageData = context.getImageData(0, 0, this.width, this.height);</li>
<li class="indent1"></li>
<li class="indent1">var pixels = imageData.data;</li>
<li class="indent1">for (var i = 0, n = pixels.length; i < n; i += 4) {</li>
<li class="indent2">var r = pixels[i ]; // red</li>
<li class="indent2">var g = pixels[i+1]; // green</li>
<li class="indent2">var b = pixels[i+2]; // blue</li>
<li class="indent2">var a = pixels[i+3]; // alpha</li>
<li class="indent1">}</li>
<li>}</li>
</ul>
<p class="caption">Note that we have to do everything with the
image data in its onload callback otherwise the image won't have
finished loading.</p>
</div>
<p>In the previous image the 'pixels' were 5 pixels
wide. <span class="tool">divify</span> lets you specify the pixel
width, so we can increase the pixelation factor:</p>
<div id="pix2" class="demo-pix">
<p class="caption">Pixels of size 10 pixels.</p>
</div>
<p>Now we can apply arbitrary CSS styles to the pixel divs:</p>
<div id="pix3" class="demo-pix">
<p class="caption">border-radius</p>
</div>
<div id="pix4" class="demo-pix">
<p class="caption">margin</p>
</div>
<div id="pix5" class="demo-pix">
<p class="caption">border</p>
</div>
<div id="pix6" class="demo-pix">
<p class="caption">margin and border</p>
</div>
<div id="pix7" class="demo-pix">
<p class="caption">border-radius, margin *and* box-shadow. Oh my.</p>
</div>
<p> One interesting thing is that changing the float value from
'left' to 'right' has the effect of flipping the image
horizontally. And yes, you can set the pixel length to one. This of
course results in a rather large number of divs which need
rendering, so if your browser does not choke on this, you'll wind up
with a remarkably faithful reproduction of the image.</p>
<p>The code is up
on <a href="http://github.com/ned2/divify">GitHub</a>, and you can
try it out below with your own image. Note that if necessary the
image will be cropped so the height and width are multiples of
the pixel size.</p>
<form id="divify-form" onsubmit="return false;">
<div id="html-popup" class="popup" style="display: none;">
<p>Divified HTML</p>
<textarea></textarea>
</div>
<div id="css-popup" class="popup" style="display: none;">
<p>Divified CSS</p>
<textarea></textarea>
</div>
<ul>
<li><input id="divify-file-input" type="file" name="file"></li>
<li id="image-width">
<div class="input-label">Width:</div>
<div class="input-value"></div>
</li>
<li id="image-height">
<div class="input-label">Height:</div>
<div class="input-value"></div>
</li>
<li>
<div class="input-label">Pixel size:</div>
<div class="input-value"><input id="pixel-size-input" size="3">
</li>
<li>
<input id="submit-divify" type="submit" value="Divify!">
<input id="get-html" type="submit" value="HTML" style="display: none;">
<input id="get-css" type="submit" value="CSS" style="display: none;">
</li>
</ul>
</form>
<div id="user-pix" class="demo-pix"></div>
</body>
</html>