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