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