OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 | |
5 <meta charset=utf8> | |
6 | |
7 <!-- | |
8 Copyright (C) 2007 Apple Inc. All rights reserved. | |
9 Copyright (C) 2010 Mozilla Foundation | |
10 | |
11 Redistribution and use in source and binary forms, with or without | |
12 modification, are permitted provided that the following conditions | |
13 are met: | |
14 1. Redistributions of source code must retain the above copyright | |
15 notice, this list of conditions and the following disclaimer. | |
16 2. Redistributions in binary form must reproduce the above copyright | |
17 notice, this list of conditions and the following disclaimer in the | |
18 documentation and/or other materials provided with the distribution. | |
19 | |
20 THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY | |
21 EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | |
22 IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR | |
23 PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR | |
24 CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | |
25 EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, | |
26 PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR | |
27 PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY | |
28 OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | |
29 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | |
30 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | |
31 --> | |
32 | |
33 <title>Kraken JavaScript Benchmark: Gaussian Blur</title> | |
34 <link rel="stylesheet" href="../kraken.css"> | |
35 <script> | |
36 | |
37 </script> | |
38 <style> #display { border: 5px solid rgb(0,0,50);}</style> | |
39 </head> | |
40 | |
41 <body> | |
42 <div id="content"> | |
43 <h2>Kraken JavaScript Benchmark: Gaussian Blur</h2> | |
44 <div id="results"> | |
45 <p>This benchmark performs a <a href="http://en.wikipedia.org/wiki/Gaussian_
blur">Gaussian blur</a> on a photo.</p> | |
46 <p><small>Photo courtesy <a href="http://www.flickr.com/photos/katclay/42965
23922/in/photostream/">Kat Clay</a> from Flickr</small>.</p> | |
47 <img id="image" src="squid.png" width="400" height="267"> | |
48 <canvas id="canvas" width="400" height="267"></canvas> | |
49 <script> | |
50 var sigma = 10; // radius | |
51 var kernel, kernelSize, kernelSum; | |
52 buildKernel(); | |
53 | |
54 try { | |
55 // Opera createImageData fix | |
56 if (!("createImageData" in CanvasRenderingContext2D.prototype)) { | |
57 CanvasRenderingContext2D.prototype.createImageData = function(sw,sh) {
return this.getImageData(0,0,sw,sh); } | |
58 } | |
59 } catch(e) {} | |
60 | |
61 function buildKernel() { | |
62 var ss = sigma * sigma; | |
63 var factor = 2 * Math.PI * ss; | |
64 kernel = []; | |
65 kernel.push([]); | |
66 var i = 0, j; | |
67 do { | |
68 var g = Math.exp(-(i * i) / (2 * ss)) / factor; | |
69 if (g < 1e-3) break; | |
70 kernel[0].push(g); | |
71 ++i; | |
72 } while (i < 7); | |
73 kernelSize = i; | |
74 for (j = 1; j < kernelSize; ++j) { | |
75 kernel.push([]); | |
76 for (i = 0; i < kernelSize; ++i) { | |
77 var g = Math.exp(-(i * i + j * j) / (2 * ss)) / factor; | |
78 kernel[j].push(g); | |
79 } | |
80 } | |
81 kernelSum = 0; | |
82 for (j = 1 - kernelSize; j < kernelSize; ++j) { | |
83 for (i = 1 - kernelSize; i < kernelSize; ++i) { | |
84 kernelSum += kernel[Math.abs(j)][Math.abs(i)]; | |
85 } | |
86 } | |
87 } | |
88 | |
89 function blurTest() { | |
90 var results = document.getElementById('blur-result'); | |
91 results.innerHTML = "Running test..."; | |
92 | |
93 window.setTimeout(function() { | |
94 var canvas = document.getElementById('canvas'); | |
95 var ctx = canvas.getContext('2d'); | |
96 var img = document.getElementById('image') | |
97 ctx.drawImage(img, 0, 0, img.width, img.height); | |
98 | |
99 var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); | |
100 var width = imgData.width, height = imgData.height; | |
101 var data = imgData.data; | |
102 | |
103 var len = data.length; | |
104 var startTime = (new Date()).getTime(); | |
105 | |
106 for (var y = 0; y < height; ++y) { | |
107 for (var x = 0; x < width; ++x) { | |
108 var r = 0, g = 0, b = 0, a = 0; | |
109 for (j = 1 - kernelSize; j < kernelSize; ++j) { | |
110 if (y + j < 0 || y + j >= height) continue; | |
111 for (i = 1 - kernelSize; i < kernelSize; ++i) { | |
112 if (x + i < 0 || x + i >= width) continue; | |
113 r += data[4 * ((y + j) * width + (x + i)) + 0] * kernel[Math.a
bs(j)][Math.abs(i)]; | |
114 g += data[4 * ((y + j) * width + (x + i)) + 1] * kernel[Math.a
bs(j)][Math.abs(i)]; | |
115 b += data[4 * ((y + j) * width + (x + i)) + 2] * kernel[Math.a
bs(j)][Math.abs(i)]; | |
116 a += data[4 * ((y + j) * width + (x + i)) + 3] * kernel[Math.a
bs(j)][Math.abs(i)]; | |
117 } | |
118 } | |
119 data[4 * (y * width + x) + 0] = r / kernelSum; | |
120 data[4 * (y * width + x) + 1] = g / kernelSum; | |
121 data[4 * (y * width + x) + 2] = b / kernelSum; | |
122 data[4 * (y * width + x) + 3] = a / kernelSum; | |
123 } | |
124 } | |
125 var finishTime = Date.now() - startTime; | |
126 for (var i = 0; i < data.length; i++) { | |
127 imgData.data[i] = data[i]; | |
128 } | |
129 //imgData.data = data; | |
130 ctx.putImageData(imgData, 0, 0); | |
131 results.innerHTML = "Finished: " + finishTime + "ms"; | |
132 }, 10); | |
133 } | |
134 </script> | |
135 <p><input type="button" value="Blur Test" onclick="blurTest();"> <span
id="blur-result"></span></p> | |
136 </div> | |
137 </div> | |
138 </body> | |
139 </html> | |
OLD | NEW |