| 1 |
/* |
| 2 |
|
| 3 |
StackBlur - a fast almost Gaussian Blur For Canvas |
| 4 |
|
| 5 |
Version: 0.5 |
| 6 |
Author: Mario Klingemann |
| 7 |
Contact: mario@quasimondo.com |
| 8 |
Website: http://www.quasimondo.com/StackBlurForCanvas |
| 9 |
Twitter: @quasimondo |
| 10 |
|
| 11 |
In case you find this class useful - especially in commercial projects - |
| 12 |
I am not totally unhappy for a small donation to my PayPal account |
| 13 |
mario@quasimondo.de |
| 14 |
|
| 15 |
Or support me on flattr: |
| 16 |
https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript |
| 17 |
|
| 18 |
Copyright (c) 2010 Mario Klingemann |
| 19 |
|
| 20 |
Permission is hereby granted, free of charge, to any person |
| 21 |
obtaining a copy of this software and associated documentation |
| 22 |
files (the "Software"), to deal in the Software without |
| 23 |
restriction, including without limitation the rights to use, |
| 24 |
copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 25 |
copies of the Software, and to permit persons to whom the |
| 26 |
Software is furnished to do so, subject to the following |
| 27 |
conditions: |
| 28 |
|
| 29 |
The above copyright notice and this permission notice shall be |
| 30 |
included in all copies or substantial portions of the Software. |
| 31 |
|
| 32 |
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
| 33 |
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES |
| 34 |
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND |
| 35 |
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT |
| 36 |
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, |
| 37 |
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING |
| 38 |
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR |
| 39 |
OTHER DEALINGS IN THE SOFTWARE. |
| 40 |
*/ |
| 41 |
|
| 42 |
(function ( global ) { |
| 43 |
|
| 44 |
var mul_table = [ |
| 45 |
512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512, |
| 46 |
454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512, |
| 47 |
482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456, |
| 48 |
437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512, |
| 49 |
497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328, |
| 50 |
320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456, |
| 51 |
446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335, |
| 52 |
329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512, |
| 53 |
505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405, |
| 54 |
399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328, |
| 55 |
324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271, |
| 56 |
268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456, |
| 57 |
451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388, |
| 58 |
385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335, |
| 59 |
332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292, |
| 60 |
289,287,285,282,280,278,275,273,271,269,267,265,263,261,259]; |
| 61 |
|
| 62 |
|
| 63 |
var shg_table = [ |
| 64 |
9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, |
| 65 |
17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, |
| 66 |
19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, |
| 67 |
20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, |
| 68 |
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, |
| 69 |
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, |
| 70 |
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, |
| 71 |
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, |
| 72 |
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, |
| 73 |
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, |
| 74 |
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, |
| 75 |
23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, |
| 76 |
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, |
| 77 |
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, |
| 78 |
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, |
| 79 |
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24 ]; |
| 80 |
|
| 81 |
function premultiplyAlpha(imageData) |
| 82 |
{ |
| 83 |
var pixels = imageData.data; |
| 84 |
var size = imageData.width * imageData.height * 4; |
| 85 |
|
| 86 |
for (var i=0; i<size; i+=4) |
| 87 |
{ |
| 88 |
var a = pixels[i+3] / 255; |
| 89 |
pixels[i ] *= a; |
| 90 |
pixels[i+1] *= a; |
| 91 |
pixels[i+2] *= a; |
| 92 |
} |
| 93 |
} |
| 94 |
|
| 95 |
function unpremultiplyAlpha(imageData) |
| 96 |
{ |
| 97 |
var pixels = imageData.data; |
| 98 |
var size = imageData.width * imageData.height * 4; |
| 99 |
|
| 100 |
for (var i=0; i<size; i+=4) |
| 101 |
{ |
| 102 |
var a = pixels[i+3]; |
| 103 |
if (a != 0) |
| 104 |
{ |
| 105 |
a = 255 / a; |
| 106 |
pixels[i ] *= a; |
| 107 |
pixels[i+1] *= a; |
| 108 |
pixels[i+2] *= a; |
| 109 |
} |
| 110 |
} |
| 111 |
} |
| 112 |
|
| 113 |
function stackBlurImage( imageID, canvasID, radius, blurAlphaChannel ) |
| 114 |
{ |
| 115 |
|
| 116 |
var img = document.getElementById( imageID ); |
| 117 |
var w = img.naturalWidth; |
| 118 |
var h = img.naturalHeight; |
| 119 |
|
| 120 |
var canvas = document.getElementById( canvasID ); |
| 121 |
|
| 122 |
canvas.style.width = w + "px"; |
| 123 |
canvas.style.height = h + "px"; |
| 124 |
canvas.width = w; |
| 125 |
canvas.height = h; |
| 126 |
|
| 127 |
var context = canvas.getContext("2d"); |
| 128 |
context.clearRect( 0, 0, w, h ); |
| 129 |
context.drawImage( img, 0, 0 ); |
| 130 |
|
| 131 |
if ( isNaN(radius) || radius < 1 ) return; |
| 132 |
|
| 133 |
if ( blurAlphaChannel ) |
| 134 |
stackBlurCanvasRGBA( canvasID, 0, 0, w, h, radius ); |
| 135 |
else |
| 136 |
stackBlurCanvasRGB( canvasID, 0, 0, w, h, radius ); |
| 137 |
} |
| 138 |
|
| 139 |
|
| 140 |
function stackBlurCanvasRGBA( id, top_x, top_y, width, height, radius ) |
| 141 |
{ |
| 142 |
if ( isNaN(radius) || radius < 1 ) return; |
| 143 |
radius |= 0; |
| 144 |
|
| 145 |
var canvas = document.getElementById( id ); |
| 146 |
var context = canvas.getContext("2d"); |
| 147 |
var imageData; |
| 148 |
|
| 149 |
try { |
| 150 |
try { |
| 151 |
imageData = context.getImageData( top_x, top_y, width, height ); |
| 152 |
} catch(e) { |
| 153 |
|
| 154 |
// NOTE: this part is supposedly only needed if you want to work with local files |
| 155 |
// so it might be okay to remove the whole try/catch block and just use |
| 156 |
// imageData = context.getImageData( top_x, top_y, width, height ); |
| 157 |
try { |
| 158 |
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); |
| 159 |
imageData = context.getImageData( top_x, top_y, width, height ); |
| 160 |
} catch(e) { |
| 161 |
alert("Cannot access local image"); |
| 162 |
throw new Error("unable to access local image data: " + e); |
| 163 |
return; |
| 164 |
} |
| 165 |
} |
| 166 |
} catch(e) { |
| 167 |
alert("Cannot access image"); |
| 168 |
throw new Error("unable to access image data: " + e); |
| 169 |
} |
| 170 |
|
| 171 |
premultiplyAlpha(imageData); |
| 172 |
|
| 173 |
var pixels = imageData.data; |
| 174 |
|
| 175 |
var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum, |
| 176 |
r_out_sum, g_out_sum, b_out_sum, a_out_sum, |
| 177 |
r_in_sum, g_in_sum, b_in_sum, a_in_sum, |
| 178 |
pr, pg, pb, pa, rbs; |
| 179 |
|
| 180 |
var div = radius + radius + 1; |
| 181 |
var w4 = width << 2; |
| 182 |
var widthMinus1 = width - 1; |
| 183 |
var heightMinus1 = height - 1; |
| 184 |
var radiusPlus1 = radius + 1; |
| 185 |
var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2; |
| 186 |
|
| 187 |
var stackStart = new BlurStack(); |
| 188 |
var stack = stackStart; |
| 189 |
for ( i = 1; i < div; i++ ) |
| 190 |
{ |
| 191 |
stack = stack.next = new BlurStack(); |
| 192 |
if ( i == radiusPlus1 ) var stackEnd = stack; |
| 193 |
} |
| 194 |
stack.next = stackStart; |
| 195 |
var stackIn = null; |
| 196 |
var stackOut = null; |
| 197 |
|
| 198 |
yw = yi = 0; |
| 199 |
|
| 200 |
var mul_sum = mul_table[radius]; |
| 201 |
var shg_sum = shg_table[radius]; |
| 202 |
|
| 203 |
for ( y = 0; y < height; y++ ) |
| 204 |
{ |
| 205 |
r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0; |
| 206 |
|
| 207 |
r_out_sum = radiusPlus1 * ( pr = pixels[yi] ); |
| 208 |
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] ); |
| 209 |
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] ); |
| 210 |
a_out_sum = radiusPlus1 * ( pa = pixels[yi+3] ); |
| 211 |
|
| 212 |
r_sum += sumFactor * pr; |
| 213 |
g_sum += sumFactor * pg; |
| 214 |
b_sum += sumFactor * pb; |
| 215 |
a_sum += sumFactor * pa; |
| 216 |
|
| 217 |
stack = stackStart; |
| 218 |
|
| 219 |
for( i = 0; i < radiusPlus1; i++ ) |
| 220 |
{ |
| 221 |
stack.r = pr; |
| 222 |
stack.g = pg; |
| 223 |
stack.b = pb; |
| 224 |
stack.a = pa; |
| 225 |
stack = stack.next; |
| 226 |
} |
| 227 |
|
| 228 |
for( i = 1; i < radiusPlus1; i++ ) |
| 229 |
{ |
| 230 |
p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 ); |
| 231 |
r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i ); |
| 232 |
g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs; |
| 233 |
b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs; |
| 234 |
a_sum += ( stack.a = ( pa = pixels[p+3])) * rbs; |
| 235 |
|
| 236 |
r_in_sum += pr; |
| 237 |
g_in_sum += pg; |
| 238 |
b_in_sum += pb; |
| 239 |
a_in_sum += pa; |
| 240 |
|
| 241 |
stack = stack.next; |
| 242 |
} |
| 243 |
|
| 244 |
stackIn = stackStart; |
| 245 |
stackOut = stackEnd; |
| 246 |
for ( x = 0; x < width; x++ ) |
| 247 |
{ |
| 248 |
pixels[yi] = (r_sum * mul_sum) >> shg_sum; |
| 249 |
pixels[yi+1] = (g_sum * mul_sum) >> shg_sum; |
| 250 |
pixels[yi+2] = (b_sum * mul_sum) >> shg_sum; |
| 251 |
pixels[yi+3] = (a_sum * mul_sum) >> shg_sum; |
| 252 |
|
| 253 |
r_sum -= r_out_sum; |
| 254 |
g_sum -= g_out_sum; |
| 255 |
b_sum -= b_out_sum; |
| 256 |
a_sum -= a_out_sum; |
| 257 |
|
| 258 |
r_out_sum -= stackIn.r; |
| 259 |
g_out_sum -= stackIn.g; |
| 260 |
b_out_sum -= stackIn.b; |
| 261 |
a_out_sum -= stackIn.a; |
| 262 |
|
| 263 |
p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2; |
| 264 |
|
| 265 |
r_in_sum += ( stackIn.r = pixels[p]); |
| 266 |
g_in_sum += ( stackIn.g = pixels[p+1]); |
| 267 |
b_in_sum += ( stackIn.b = pixels[p+2]); |
| 268 |
a_in_sum += ( stackIn.a = pixels[p+3]); |
| 269 |
|
| 270 |
r_sum += r_in_sum; |
| 271 |
g_sum += g_in_sum; |
| 272 |
b_sum += b_in_sum; |
| 273 |
a_sum += a_in_sum; |
| 274 |
|
| 275 |
stackIn = stackIn.next; |
| 276 |
|
| 277 |
r_out_sum += ( pr = stackOut.r ); |
| 278 |
g_out_sum += ( pg = stackOut.g ); |
| 279 |
b_out_sum += ( pb = stackOut.b ); |
| 280 |
a_out_sum += ( pa = stackOut.a ); |
| 281 |
|
| 282 |
r_in_sum -= pr; |
| 283 |
g_in_sum -= pg; |
| 284 |
b_in_sum -= pb; |
| 285 |
a_in_sum -= pa; |
| 286 |
|
| 287 |
stackOut = stackOut.next; |
| 288 |
|
| 289 |
yi += 4; |
| 290 |
} |
| 291 |
yw += width; |
| 292 |
} |
| 293 |
|
| 294 |
|
| 295 |
for ( x = 0; x < width; x++ ) |
| 296 |
{ |
| 297 |
g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0; |
| 298 |
|
| 299 |
yi = x << 2; |
| 300 |
r_out_sum = radiusPlus1 * ( pr = pixels[yi]); |
| 301 |
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]); |
| 302 |
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]); |
| 303 |
a_out_sum = radiusPlus1 * ( pa = pixels[yi+3]); |
| 304 |
|
| 305 |
r_sum += sumFactor * pr; |
| 306 |
g_sum += sumFactor * pg; |
| 307 |
b_sum += sumFactor * pb; |
| 308 |
a_sum += sumFactor * pa; |
| 309 |
|
| 310 |
stack = stackStart; |
| 311 |
|
| 312 |
for( i = 0; i < radiusPlus1; i++ ) |
| 313 |
{ |
| 314 |
stack.r = pr; |
| 315 |
stack.g = pg; |
| 316 |
stack.b = pb; |
| 317 |
stack.a = pa; |
| 318 |
stack = stack.next; |
| 319 |
} |
| 320 |
|
| 321 |
yp = width; |
| 322 |
|
| 323 |
for( i = 1; i <= radius; i++ ) |
| 324 |
{ |
| 325 |
yi = ( yp + x ) << 2; |
| 326 |
|
| 327 |
r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i ); |
| 328 |
g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs; |
| 329 |
b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs; |
| 330 |
a_sum += ( stack.a = ( pa = pixels[yi+3])) * rbs; |
| 331 |
|
| 332 |
r_in_sum += pr; |
| 333 |
g_in_sum += pg; |
| 334 |
b_in_sum += pb; |
| 335 |
a_in_sum += pa; |
| 336 |
|
| 337 |
stack = stack.next; |
| 338 |
|
| 339 |
if( i < heightMinus1 ) |
| 340 |
{ |
| 341 |
yp += width; |
| 342 |
} |
| 343 |
} |
| 344 |
|
| 345 |
yi = x; |
| 346 |
stackIn = stackStart; |
| 347 |
stackOut = stackEnd; |
| 348 |
for ( y = 0; y < height; y++ ) |
| 349 |
{ |
| 350 |
p = yi << 2; |
| 351 |
pixels[p] = (r_sum * mul_sum) >> shg_sum; |
| 352 |
pixels[p+1] = (g_sum * mul_sum) >> shg_sum; |
| 353 |
pixels[p+2] = (b_sum * mul_sum) >> shg_sum; |
| 354 |
pixels[p+3] = (a_sum * mul_sum) >> shg_sum; |
| 355 |
|
| 356 |
r_sum -= r_out_sum; |
| 357 |
g_sum -= g_out_sum; |
| 358 |
b_sum -= b_out_sum; |
| 359 |
a_sum -= a_out_sum; |
| 360 |
|
| 361 |
r_out_sum -= stackIn.r; |
| 362 |
g_out_sum -= stackIn.g; |
| 363 |
b_out_sum -= stackIn.b; |
| 364 |
a_out_sum -= stackIn.a; |
| 365 |
|
| 366 |
p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2; |
| 367 |
|
| 368 |
r_sum += ( r_in_sum += ( stackIn.r = pixels[p])); |
| 369 |
g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1])); |
| 370 |
b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2])); |
| 371 |
a_sum += ( a_in_sum += ( stackIn.a = pixels[p+3])); |
| 372 |
|
| 373 |
stackIn = stackIn.next; |
| 374 |
|
| 375 |
r_out_sum += ( pr = stackOut.r ); |
| 376 |
g_out_sum += ( pg = stackOut.g ); |
| 377 |
b_out_sum += ( pb = stackOut.b ); |
| 378 |
a_out_sum += ( pa = stackOut.a ); |
| 379 |
|
| 380 |
r_in_sum -= pr; |
| 381 |
g_in_sum -= pg; |
| 382 |
b_in_sum -= pb; |
| 383 |
a_in_sum -= pa; |
| 384 |
|
| 385 |
stackOut = stackOut.next; |
| 386 |
|
| 387 |
yi += width; |
| 388 |
} |
| 389 |
} |
| 390 |
|
| 391 |
unpremultiplyAlpha(imageData); |
| 392 |
|
| 393 |
context.putImageData( imageData, top_x, top_y ); |
| 394 |
} |
| 395 |
|
| 396 |
|
| 397 |
function stackBlurCanvasRGB( id, top_x, top_y, width, height, radius ) |
| 398 |
{ |
| 399 |
if ( isNaN(radius) || radius < 1 ) return; |
| 400 |
radius |= 0; |
| 401 |
|
| 402 |
var canvas = document.getElementById( id ); |
| 403 |
var context = canvas.getContext("2d"); |
| 404 |
var imageData; |
| 405 |
|
| 406 |
try { |
| 407 |
try { |
| 408 |
imageData = context.getImageData( top_x, top_y, width, height ); |
| 409 |
} catch(e) { |
| 410 |
|
| 411 |
// NOTE: this part is supposedly only needed if you want to work with local files |
| 412 |
// so it might be okay to remove the whole try/catch block and just use |
| 413 |
// imageData = context.getImageData( top_x, top_y, width, height ); |
| 414 |
try { |
| 415 |
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); |
| 416 |
imageData = context.getImageData( top_x, top_y, width, height ); |
| 417 |
} catch(e) { |
| 418 |
alert("Cannot access local image"); |
| 419 |
throw new Error("unable to access local image data: " + e); |
| 420 |
return; |
| 421 |
} |
| 422 |
} |
| 423 |
} catch(e) { |
| 424 |
alert("Cannot access image"); |
| 425 |
throw new Error("unable to access image data: " + e); |
| 426 |
} |
| 427 |
|
| 428 |
var pixels = imageData.data; |
| 429 |
|
| 430 |
var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, |
| 431 |
r_out_sum, g_out_sum, b_out_sum, |
| 432 |
r_in_sum, g_in_sum, b_in_sum, |
| 433 |
pr, pg, pb, rbs; |
| 434 |
|
| 435 |
var div = radius + radius + 1; |
| 436 |
var w4 = width << 2; |
| 437 |
var widthMinus1 = width - 1; |
| 438 |
var heightMinus1 = height - 1; |
| 439 |
var radiusPlus1 = radius + 1; |
| 440 |
var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2; |
| 441 |
|
| 442 |
var stackStart = new BlurStack(); |
| 443 |
var stack = stackStart; |
| 444 |
for ( i = 1; i < div; i++ ) |
| 445 |
{ |
| 446 |
stack = stack.next = new BlurStack(); |
| 447 |
if ( i == radiusPlus1 ) var stackEnd = stack; |
| 448 |
} |
| 449 |
stack.next = stackStart; |
| 450 |
var stackIn = null; |
| 451 |
var stackOut = null; |
| 452 |
|
| 453 |
yw = yi = 0; |
| 454 |
|
| 455 |
var mul_sum = mul_table[radius]; |
| 456 |
var shg_sum = shg_table[radius]; |
| 457 |
|
| 458 |
for ( y = 0; y < height; y++ ) |
| 459 |
{ |
| 460 |
r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0; |
| 461 |
|
| 462 |
r_out_sum = radiusPlus1 * ( pr = pixels[yi] ); |
| 463 |
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] ); |
| 464 |
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] ); |
| 465 |
|
| 466 |
r_sum += sumFactor * pr; |
| 467 |
g_sum += sumFactor * pg; |
| 468 |
b_sum += sumFactor * pb; |
| 469 |
|
| 470 |
stack = stackStart; |
| 471 |
|
| 472 |
for( i = 0; i < radiusPlus1; i++ ) |
| 473 |
{ |
| 474 |
stack.r = pr; |
| 475 |
stack.g = pg; |
| 476 |
stack.b = pb; |
| 477 |
stack = stack.next; |
| 478 |
} |
| 479 |
|
| 480 |
for( i = 1; i < radiusPlus1; i++ ) |
| 481 |
{ |
| 482 |
p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 ); |
| 483 |
r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i ); |
| 484 |
g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs; |
| 485 |
b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs; |
| 486 |
|
| 487 |
r_in_sum += pr; |
| 488 |
g_in_sum += pg; |
| 489 |
b_in_sum += pb; |
| 490 |
|
| 491 |
stack = stack.next; |
| 492 |
} |
| 493 |
|
| 494 |
|
| 495 |
stackIn = stackStart; |
| 496 |
stackOut = stackEnd; |
| 497 |
for ( x = 0; x < width; x++ ) |
| 498 |
{ |
| 499 |
pixels[yi] = (r_sum * mul_sum) >> shg_sum; |
| 500 |
pixels[yi+1] = (g_sum * mul_sum) >> shg_sum; |
| 501 |
pixels[yi+2] = (b_sum * mul_sum) >> shg_sum; |
| 502 |
|
| 503 |
r_sum -= r_out_sum; |
| 504 |
g_sum -= g_out_sum; |
| 505 |
b_sum -= b_out_sum; |
| 506 |
|
| 507 |
r_out_sum -= stackIn.r; |
| 508 |
g_out_sum -= stackIn.g; |
| 509 |
b_out_sum -= stackIn.b; |
| 510 |
|
| 511 |
p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2; |
| 512 |
|
| 513 |
r_in_sum += ( stackIn.r = pixels[p]); |
| 514 |
g_in_sum += ( stackIn.g = pixels[p+1]); |
| 515 |
b_in_sum += ( stackIn.b = pixels[p+2]); |
| 516 |
|
| 517 |
r_sum += r_in_sum; |
| 518 |
g_sum += g_in_sum; |
| 519 |
b_sum += b_in_sum; |
| 520 |
|
| 521 |
stackIn = stackIn.next; |
| 522 |
|
| 523 |
r_out_sum += ( pr = stackOut.r ); |
| 524 |
g_out_sum += ( pg = stackOut.g ); |
| 525 |
b_out_sum += ( pb = stackOut.b ); |
| 526 |
|
| 527 |
r_in_sum -= pr; |
| 528 |
g_in_sum -= pg; |
| 529 |
b_in_sum -= pb; |
| 530 |
|
| 531 |
stackOut = stackOut.next; |
| 532 |
|
| 533 |
yi += 4; |
| 534 |
} |
| 535 |
yw += width; |
| 536 |
} |
| 537 |
|
| 538 |
|
| 539 |
for ( x = 0; x < width; x++ ) |
| 540 |
{ |
| 541 |
g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0; |
| 542 |
|
| 543 |
yi = x << 2; |
| 544 |
r_out_sum = radiusPlus1 * ( pr = pixels[yi]); |
| 545 |
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]); |
| 546 |
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]); |
| 547 |
|
| 548 |
r_sum += sumFactor * pr; |
| 549 |
g_sum += sumFactor * pg; |
| 550 |
b_sum += sumFactor * pb; |
| 551 |
|
| 552 |
stack = stackStart; |
| 553 |
|
| 554 |
for( i = 0; i < radiusPlus1; i++ ) |
| 555 |
{ |
| 556 |
stack.r = pr; |
| 557 |
stack.g = pg; |
| 558 |
stack.b = pb; |
| 559 |
stack = stack.next; |
| 560 |
} |
| 561 |
|
| 562 |
yp = width; |
| 563 |
|
| 564 |
for( i = 1; i <= radius; i++ ) |
| 565 |
{ |
| 566 |
yi = ( yp + x ) << 2; |
| 567 |
|
| 568 |
r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i ); |
| 569 |
g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs; |
| 570 |
b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs; |
| 571 |
|
| 572 |
r_in_sum += pr; |
| 573 |
g_in_sum += pg; |
| 574 |
b_in_sum += pb; |
| 575 |
|
| 576 |
stack = stack.next; |
| 577 |
|
| 578 |
if( i < heightMinus1 ) |
| 579 |
{ |
| 580 |
yp += width; |
| 581 |
} |
| 582 |
} |
| 583 |
|
| 584 |
yi = x; |
| 585 |
stackIn = stackStart; |
| 586 |
stackOut = stackEnd; |
| 587 |
for ( y = 0; y < height; y++ ) |
| 588 |
{ |
| 589 |
p = yi << 2; |
| 590 |
pixels[p] = (r_sum * mul_sum) >> shg_sum; |
| 591 |
pixels[p+1] = (g_sum * mul_sum) >> shg_sum; |
| 592 |
pixels[p+2] = (b_sum * mul_sum) >> shg_sum; |
| 593 |
|
| 594 |
r_sum -= r_out_sum; |
| 595 |
g_sum -= g_out_sum; |
| 596 |
b_sum -= b_out_sum; |
| 597 |
|
| 598 |
r_out_sum -= stackIn.r; |
| 599 |
g_out_sum -= stackIn.g; |
| 600 |
b_out_sum -= stackIn.b; |
| 601 |
|
| 602 |
p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2; |
| 603 |
|
| 604 |
r_sum += ( r_in_sum += ( stackIn.r = pixels[p])); |
| 605 |
g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1])); |
| 606 |
b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2])); |
| 607 |
|
| 608 |
stackIn = stackIn.next; |
| 609 |
|
| 610 |
r_out_sum += ( pr = stackOut.r ); |
| 611 |
g_out_sum += ( pg = stackOut.g ); |
| 612 |
b_out_sum += ( pb = stackOut.b ); |
| 613 |
|
| 614 |
r_in_sum -= pr; |
| 615 |
g_in_sum -= pg; |
| 616 |
b_in_sum -= pb; |
| 617 |
|
| 618 |
stackOut = stackOut.next; |
| 619 |
|
| 620 |
yi += width; |
| 621 |
} |
| 622 |
} |
| 623 |
|
| 624 |
context.putImageData( imageData, top_x, top_y ); |
| 625 |
|
| 626 |
} |
| 627 |
|
| 628 |
function BlurStack() |
| 629 |
{ |
| 630 |
this.r = 0; |
| 631 |
this.g = 0; |
| 632 |
this.b = 0; |
| 633 |
this.a = 0; |
| 634 |
this.next = null; |
| 635 |
} |
| 636 |
|
| 637 |
var stackBlur = { |
| 638 |
image: stackBlurImage, |
| 639 |
canvasRGBA: stackBlurCanvasRGBA, |
| 640 |
canvasRGB: stackBlurCanvasRGB |
| 641 |
}; |
| 642 |
|
| 643 |
// export as AMD... |
| 644 |
if ( typeof define !== 'undefined' && define.amd ) { |
| 645 |
define( function () { return stackBlur; }); |
| 646 |
} |
| 647 |
|
| 648 |
// ...or as browserify |
| 649 |
else if ( typeof module !== 'undefined' && module.exports ) { |
| 650 |
module.exports = stackBlur; |
| 651 |
} |
| 652 |
|
| 653 |
global.stackBlur = stackBlur; |
| 654 |
|
| 655 |
}( typeof window !== 'undefined' ? window : this )); |
