You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
			
				
					640 lines
				
				19 KiB
			
		
		
			
		
	
	
					640 lines
				
				19 KiB
			| 
											11 months ago
										 | function _typeof(obj) { | ||
|  |   "@babel/helpers - typeof"; | ||
|  | 
 | ||
|  |   if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { | ||
|  |     _typeof = function (obj) { | ||
|  |       return typeof obj; | ||
|  |     }; | ||
|  |   } else { | ||
|  |     _typeof = function (obj) { | ||
|  |       return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; | ||
|  |     }; | ||
|  |   } | ||
|  | 
 | ||
|  |   return _typeof(obj); | ||
|  | } | ||
|  | 
 | ||
|  | function _classCallCheck(instance, Constructor) { | ||
|  |   if (!(instance instanceof Constructor)) { | ||
|  |     throw new TypeError("Cannot call a class as a function"); | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | /* eslint-disable no-bitwise -- used for calculations */ | ||
|  | 
 | ||
|  | /* eslint-disable unicorn/prefer-query-selector -- aiming at | ||
|  |   backward-compatibility */ | ||
|  | 
 | ||
|  | /** | ||
|  | * StackBlur - a fast almost Gaussian Blur For Canvas | ||
|  | * | ||
|  | * In case you find this class useful - especially in commercial projects - | ||
|  | * I am not totally unhappy for a small donation to my PayPal account | ||
|  | * mario@quasimondo.de | ||
|  | * | ||
|  | * Or support me on flattr: | ||
|  | * {@link https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript}.
 | ||
|  | * | ||
|  | * @module StackBlur | ||
|  | * @author Mario Klingemann | ||
|  | * Contact: mario@quasimondo.com | ||
|  | * Website: {@link http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html}
 | ||
|  | * Twitter: @quasimondo | ||
|  | * | ||
|  | * @copyright (c) 2010 Mario Klingemann | ||
|  | * | ||
|  | * Permission is hereby granted, free of charge, to any person | ||
|  | * obtaining a copy of this software and associated documentation | ||
|  | * files (the "Software"), to deal in the Software without | ||
|  | * restriction, including without limitation the rights to use, | ||
|  | * copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
|  | * copies of the Software, and to permit persons to whom the | ||
|  | * Software is furnished to do so, subject to the following | ||
|  | * conditions: | ||
|  | * | ||
|  | * The above copyright notice and this permission notice shall be | ||
|  | * included in all copies or substantial portions of the Software. | ||
|  | * | ||
|  | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, | ||
|  | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES | ||
|  | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND | ||
|  | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT | ||
|  | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, | ||
|  | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING | ||
|  | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR | ||
|  | * OTHER DEALINGS IN THE SOFTWARE. | ||
|  | */ | ||
|  | 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]; | ||
|  | 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]; | ||
|  | /** | ||
|  |  * @param {string|HTMLImageElement} img | ||
|  |  * @param {string|HTMLCanvasElement} canvas | ||
|  |  * @param {Float} radius | ||
|  |  * @param {boolean} blurAlphaChannel | ||
|  |  * @param {boolean} useOffset | ||
|  |  * @param {boolean} skipStyles | ||
|  |  * @returns {undefined} | ||
|  |  */ | ||
|  | 
 | ||
|  | function processImage(img, canvas, radius, blurAlphaChannel, useOffset, skipStyles) { | ||
|  |   if (typeof img === 'string') { | ||
|  |     img = document.getElementById(img); | ||
|  |   } | ||
|  | 
 | ||
|  |   if (!img || Object.prototype.toString.call(img).slice(8, -1) === 'HTMLImageElement' && !('naturalWidth' in img)) { | ||
|  |     return; | ||
|  |   } | ||
|  | 
 | ||
|  |   var dimensionType = useOffset ? 'offset' : 'natural'; | ||
|  |   var w = img[dimensionType + 'Width']; | ||
|  |   var h = img[dimensionType + 'Height']; // add ImageBitmap support,can blur texture source
 | ||
|  | 
 | ||
|  |   if (Object.prototype.toString.call(img).slice(8, -1) === 'ImageBitmap') { | ||
|  |     w = img.width; | ||
|  |     h = img.height; | ||
|  |   } | ||
|  | 
 | ||
|  |   if (typeof canvas === 'string') { | ||
|  |     canvas = document.getElementById(canvas); | ||
|  |   } | ||
|  | 
 | ||
|  |   if (!canvas || !('getContext' in canvas)) { | ||
|  |     return; | ||
|  |   } | ||
|  | 
 | ||
|  |   if (!skipStyles) { | ||
|  |     canvas.style.width = w + 'px'; | ||
|  |     canvas.style.height = h + 'px'; | ||
|  |   } | ||
|  | 
 | ||
|  |   canvas.width = w; | ||
|  |   canvas.height = h; | ||
|  |   var context = canvas.getContext('2d'); | ||
|  |   context.clearRect(0, 0, w, h); | ||
|  |   context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, w, h); | ||
|  | 
 | ||
|  |   if (isNaN(radius) || radius < 1) { | ||
|  |     return; | ||
|  |   } | ||
|  | 
 | ||
|  |   if (blurAlphaChannel) { | ||
|  |     processCanvasRGBA(canvas, 0, 0, w, h, radius); | ||
|  |   } else { | ||
|  |     processCanvasRGB(canvas, 0, 0, w, h, radius); | ||
|  |   } | ||
|  | } | ||
|  | /** | ||
|  |  * @param {string|HTMLCanvasElement} canvas | ||
|  |  * @param {Integer} topX | ||
|  |  * @param {Integer} topY | ||
|  |  * @param {Integer} width | ||
|  |  * @param {Integer} height | ||
|  |  * @throws {Error|TypeError} | ||
|  |  * @returns {ImageData} See {@link https://html.spec.whatwg.org/multipage/canvas.html#imagedata}
 | ||
|  |  */ | ||
|  | 
 | ||
|  | 
 | ||
|  | function getImageDataFromCanvas(canvas, topX, topY, width, height) { | ||
|  |   if (typeof canvas === 'string') { | ||
|  |     canvas = document.getElementById(canvas); | ||
|  |   } | ||
|  | 
 | ||
|  |   if (!canvas || _typeof(canvas) !== 'object' || !('getContext' in canvas)) { | ||
|  |     throw new TypeError('Expecting canvas with `getContext` method ' + 'in processCanvasRGB(A) calls!'); | ||
|  |   } | ||
|  | 
 | ||
|  |   var context = canvas.getContext('2d'); | ||
|  | 
 | ||
|  |   try { | ||
|  |     return context.getImageData(topX, topY, width, height); | ||
|  |   } catch (e) { | ||
|  |     throw new Error('unable to access image data: ' + e); | ||
|  |   } | ||
|  | } | ||
|  | /** | ||
|  |  * @param {HTMLCanvasElement} canvas | ||
|  |  * @param {Integer} topX | ||
|  |  * @param {Integer} topY | ||
|  |  * @param {Integer} width | ||
|  |  * @param {Integer} height | ||
|  |  * @param {Float} radius | ||
|  |  * @returns {undefined} | ||
|  |  */ | ||
|  | 
 | ||
|  | 
 | ||
|  | function processCanvasRGBA(canvas, topX, topY, width, height, radius) { | ||
|  |   if (isNaN(radius) || radius < 1) { | ||
|  |     return; | ||
|  |   } | ||
|  | 
 | ||
|  |   radius |= 0; | ||
|  |   var imageData = getImageDataFromCanvas(canvas, topX, topY, width, height); | ||
|  |   imageData = processImageDataRGBA(imageData, topX, topY, width, height, radius); | ||
|  |   canvas.getContext('2d').putImageData(imageData, topX, topY); | ||
|  | } | ||
|  | /** | ||
|  |  * @param {ImageData} imageData | ||
|  |  * @param {Integer} topX | ||
|  |  * @param {Integer} topY | ||
|  |  * @param {Integer} width | ||
|  |  * @param {Integer} height | ||
|  |  * @param {Float} radius | ||
|  |  * @returns {ImageData} | ||
|  |  */ | ||
|  | 
 | ||
|  | 
 | ||
|  | function processImageDataRGBA(imageData, topX, topY, width, height, radius) { | ||
|  |   var pixels = imageData.data; | ||
|  |   var div = 2 * radius + 1; // const w4 = width << 2;
 | ||
|  | 
 | ||
|  |   var widthMinus1 = width - 1; | ||
|  |   var heightMinus1 = height - 1; | ||
|  |   var radiusPlus1 = radius + 1; | ||
|  |   var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2; | ||
|  |   var stackStart = new BlurStack(); | ||
|  |   var stack = stackStart; | ||
|  |   var stackEnd; | ||
|  | 
 | ||
|  |   for (var i = 1; i < div; i++) { | ||
|  |     stack = stack.next = new BlurStack(); | ||
|  | 
 | ||
|  |     if (i === radiusPlus1) { | ||
|  |       stackEnd = stack; | ||
|  |     } | ||
|  |   } | ||
|  | 
 | ||
|  |   stack.next = stackStart; | ||
|  |   var stackIn = null, | ||
|  |       stackOut = null, | ||
|  |       yw = 0, | ||
|  |       yi = 0; | ||
|  |   var mulSum = mulTable[radius]; | ||
|  |   var shgSum = shgTable[radius]; | ||
|  | 
 | ||
|  |   for (var y = 0; y < height; y++) { | ||
|  |     stack = stackStart; | ||
|  |     var pr = pixels[yi], | ||
|  |         pg = pixels[yi + 1], | ||
|  |         pb = pixels[yi + 2], | ||
|  |         pa = pixels[yi + 3]; | ||
|  | 
 | ||
|  |     for (var _i = 0; _i < radiusPlus1; _i++) { | ||
|  |       stack.r = pr; | ||
|  |       stack.g = pg; | ||
|  |       stack.b = pb; | ||
|  |       stack.a = pa; | ||
|  |       stack = stack.next; | ||
|  |     } | ||
|  | 
 | ||
|  |     var rInSum = 0, | ||
|  |         gInSum = 0, | ||
|  |         bInSum = 0, | ||
|  |         aInSum = 0, | ||
|  |         rOutSum = radiusPlus1 * pr, | ||
|  |         gOutSum = radiusPlus1 * pg, | ||
|  |         bOutSum = radiusPlus1 * pb, | ||
|  |         aOutSum = radiusPlus1 * pa, | ||
|  |         rSum = sumFactor * pr, | ||
|  |         gSum = sumFactor * pg, | ||
|  |         bSum = sumFactor * pb, | ||
|  |         aSum = sumFactor * pa; | ||
|  | 
 | ||
|  |     for (var _i2 = 1; _i2 < radiusPlus1; _i2++) { | ||
|  |       var p = yi + ((widthMinus1 < _i2 ? widthMinus1 : _i2) << 2); | ||
|  |       var r = pixels[p], | ||
|  |           g = pixels[p + 1], | ||
|  |           b = pixels[p + 2], | ||
|  |           a = pixels[p + 3]; | ||
|  |       var rbs = radiusPlus1 - _i2; | ||
|  |       rSum += (stack.r = r) * rbs; | ||
|  |       gSum += (stack.g = g) * rbs; | ||
|  |       bSum += (stack.b = b) * rbs; | ||
|  |       aSum += (stack.a = a) * rbs; | ||
|  |       rInSum += r; | ||
|  |       gInSum += g; | ||
|  |       bInSum += b; | ||
|  |       aInSum += a; | ||
|  |       stack = stack.next; | ||
|  |     } | ||
|  | 
 | ||
|  |     stackIn = stackStart; | ||
|  |     stackOut = stackEnd; | ||
|  | 
 | ||
|  |     for (var x = 0; x < width; x++) { | ||
|  |       var paInitial = aSum * mulSum >>> shgSum; | ||
|  |       pixels[yi + 3] = paInitial; | ||
|  | 
 | ||
|  |       if (paInitial !== 0) { | ||
|  |         var _a2 = 255 / paInitial; | ||
|  | 
 | ||
|  |         pixels[yi] = (rSum * mulSum >>> shgSum) * _a2; | ||
|  |         pixels[yi + 1] = (gSum * mulSum >>> shgSum) * _a2; | ||
|  |         pixels[yi + 2] = (bSum * mulSum >>> shgSum) * _a2; | ||
|  |       } else { | ||
|  |         pixels[yi] = pixels[yi + 1] = pixels[yi + 2] = 0; | ||
|  |       } | ||
|  | 
 | ||
|  |       rSum -= rOutSum; | ||
|  |       gSum -= gOutSum; | ||
|  |       bSum -= bOutSum; | ||
|  |       aSum -= aOutSum; | ||
|  |       rOutSum -= stackIn.r; | ||
|  |       gOutSum -= stackIn.g; | ||
|  |       bOutSum -= stackIn.b; | ||
|  |       aOutSum -= stackIn.a; | ||
|  | 
 | ||
|  |       var _p = x + radius + 1; | ||
|  | 
 | ||
|  |       _p = yw + (_p < widthMinus1 ? _p : widthMinus1) << 2; | ||
|  |       rInSum += stackIn.r = pixels[_p]; | ||
|  |       gInSum += stackIn.g = pixels[_p + 1]; | ||
|  |       bInSum += stackIn.b = pixels[_p + 2]; | ||
|  |       aInSum += stackIn.a = pixels[_p + 3]; | ||
|  |       rSum += rInSum; | ||
|  |       gSum += gInSum; | ||
|  |       bSum += bInSum; | ||
|  |       aSum += aInSum; | ||
|  |       stackIn = stackIn.next; | ||
|  |       var _stackOut = stackOut, | ||
|  |           _r = _stackOut.r, | ||
|  |           _g = _stackOut.g, | ||
|  |           _b = _stackOut.b, | ||
|  |           _a = _stackOut.a; | ||
|  |       rOutSum += _r; | ||
|  |       gOutSum += _g; | ||
|  |       bOutSum += _b; | ||
|  |       aOutSum += _a; | ||
|  |       rInSum -= _r; | ||
|  |       gInSum -= _g; | ||
|  |       bInSum -= _b; | ||
|  |       aInSum -= _a; | ||
|  |       stackOut = stackOut.next; | ||
|  |       yi += 4; | ||
|  |     } | ||
|  | 
 | ||
|  |     yw += width; | ||
|  |   } | ||
|  | 
 | ||
|  |   for (var _x = 0; _x < width; _x++) { | ||
|  |     yi = _x << 2; | ||
|  | 
 | ||
|  |     var _pr = pixels[yi], | ||
|  |         _pg = pixels[yi + 1], | ||
|  |         _pb = pixels[yi + 2], | ||
|  |         _pa = pixels[yi + 3], | ||
|  |         _rOutSum = radiusPlus1 * _pr, | ||
|  |         _gOutSum = radiusPlus1 * _pg, | ||
|  |         _bOutSum = radiusPlus1 * _pb, | ||
|  |         _aOutSum = radiusPlus1 * _pa, | ||
|  |         _rSum = sumFactor * _pr, | ||
|  |         _gSum = sumFactor * _pg, | ||
|  |         _bSum = sumFactor * _pb, | ||
|  |         _aSum = sumFactor * _pa; | ||
|  | 
 | ||
|  |     stack = stackStart; | ||
|  | 
 | ||
|  |     for (var _i3 = 0; _i3 < radiusPlus1; _i3++) { | ||
|  |       stack.r = _pr; | ||
|  |       stack.g = _pg; | ||
|  |       stack.b = _pb; | ||
|  |       stack.a = _pa; | ||
|  |       stack = stack.next; | ||
|  |     } | ||
|  | 
 | ||
|  |     var yp = width; | ||
|  |     var _gInSum = 0, | ||
|  |         _bInSum = 0, | ||
|  |         _aInSum = 0, | ||
|  |         _rInSum = 0; | ||
|  | 
 | ||
|  |     for (var _i4 = 1; _i4 <= radius; _i4++) { | ||
|  |       yi = yp + _x << 2; | ||
|  | 
 | ||
|  |       var _rbs = radiusPlus1 - _i4; | ||
|  | 
 | ||
|  |       _rSum += (stack.r = _pr = pixels[yi]) * _rbs; | ||
|  |       _gSum += (stack.g = _pg = pixels[yi + 1]) * _rbs; | ||
|  |       _bSum += (stack.b = _pb = pixels[yi + 2]) * _rbs; | ||
|  |       _aSum += (stack.a = _pa = pixels[yi + 3]) * _rbs; | ||
|  |       _rInSum += _pr; | ||
|  |       _gInSum += _pg; | ||
|  |       _bInSum += _pb; | ||
|  |       _aInSum += _pa; | ||
|  |       stack = stack.next; | ||
|  | 
 | ||
|  |       if (_i4 < heightMinus1) { | ||
|  |         yp += width; | ||
|  |       } | ||
|  |     } | ||
|  | 
 | ||
|  |     yi = _x; | ||
|  |     stackIn = stackStart; | ||
|  |     stackOut = stackEnd; | ||
|  | 
 | ||
|  |     for (var _y = 0; _y < height; _y++) { | ||
|  |       var _p2 = yi << 2; | ||
|  | 
 | ||
|  |       pixels[_p2 + 3] = _pa = _aSum * mulSum >>> shgSum; | ||
|  | 
 | ||
|  |       if (_pa > 0) { | ||
|  |         _pa = 255 / _pa; | ||
|  |         pixels[_p2] = (_rSum * mulSum >>> shgSum) * _pa; | ||
|  |         pixels[_p2 + 1] = (_gSum * mulSum >>> shgSum) * _pa; | ||
|  |         pixels[_p2 + 2] = (_bSum * mulSum >>> shgSum) * _pa; | ||
|  |       } else { | ||
|  |         pixels[_p2] = pixels[_p2 + 1] = pixels[_p2 + 2] = 0; | ||
|  |       } | ||
|  | 
 | ||
|  |       _rSum -= _rOutSum; | ||
|  |       _gSum -= _gOutSum; | ||
|  |       _bSum -= _bOutSum; | ||
|  |       _aSum -= _aOutSum; | ||
|  |       _rOutSum -= stackIn.r; | ||
|  |       _gOutSum -= stackIn.g; | ||
|  |       _bOutSum -= stackIn.b; | ||
|  |       _aOutSum -= stackIn.a; | ||
|  |       _p2 = _x + ((_p2 = _y + radiusPlus1) < heightMinus1 ? _p2 : heightMinus1) * width << 2; | ||
|  |       _rSum += _rInSum += stackIn.r = pixels[_p2]; | ||
|  |       _gSum += _gInSum += stackIn.g = pixels[_p2 + 1]; | ||
|  |       _bSum += _bInSum += stackIn.b = pixels[_p2 + 2]; | ||
|  |       _aSum += _aInSum += stackIn.a = pixels[_p2 + 3]; | ||
|  |       stackIn = stackIn.next; | ||
|  |       _rOutSum += _pr = stackOut.r; | ||
|  |       _gOutSum += _pg = stackOut.g; | ||
|  |       _bOutSum += _pb = stackOut.b; | ||
|  |       _aOutSum += _pa = stackOut.a; | ||
|  |       _rInSum -= _pr; | ||
|  |       _gInSum -= _pg; | ||
|  |       _bInSum -= _pb; | ||
|  |       _aInSum -= _pa; | ||
|  |       stackOut = stackOut.next; | ||
|  |       yi += width; | ||
|  |     } | ||
|  |   } | ||
|  | 
 | ||
|  |   return imageData; | ||
|  | } | ||
|  | /** | ||
|  |  * @param {HTMLCanvasElement} canvas | ||
|  |  * @param {Integer} topX | ||
|  |  * @param {Integer} topY | ||
|  |  * @param {Integer} width | ||
|  |  * @param {Integer} height | ||
|  |  * @param {Float} radius | ||
|  |  * @returns {undefined} | ||
|  |  */ | ||
|  | 
 | ||
|  | 
 | ||
|  | function processCanvasRGB(canvas, topX, topY, width, height, radius) { | ||
|  |   if (isNaN(radius) || radius < 1) { | ||
|  |     return; | ||
|  |   } | ||
|  | 
 | ||
|  |   radius |= 0; | ||
|  |   var imageData = getImageDataFromCanvas(canvas, topX, topY, width, height); | ||
|  |   imageData = processImageDataRGB(imageData, topX, topY, width, height, radius); | ||
|  |   canvas.getContext('2d').putImageData(imageData, topX, topY); | ||
|  | } | ||
|  | /** | ||
|  |  * @param {ImageData} imageData | ||
|  |  * @param {Integer} topX | ||
|  |  * @param {Integer} topY | ||
|  |  * @param {Integer} width | ||
|  |  * @param {Integer} height | ||
|  |  * @param {Float} radius | ||
|  |  * @returns {ImageData} | ||
|  |  */ | ||
|  | 
 | ||
|  | 
 | ||
|  | function processImageDataRGB(imageData, topX, topY, width, height, radius) { | ||
|  |   var pixels = imageData.data; | ||
|  |   var div = 2 * radius + 1; // const w4 = width << 2;
 | ||
|  | 
 | ||
|  |   var widthMinus1 = width - 1; | ||
|  |   var heightMinus1 = height - 1; | ||
|  |   var radiusPlus1 = radius + 1; | ||
|  |   var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2; | ||
|  |   var stackStart = new BlurStack(); | ||
|  |   var stack = stackStart; | ||
|  |   var stackEnd; | ||
|  | 
 | ||
|  |   for (var i = 1; i < div; i++) { | ||
|  |     stack = stack.next = new BlurStack(); | ||
|  | 
 | ||
|  |     if (i === radiusPlus1) { | ||
|  |       stackEnd = stack; | ||
|  |     } | ||
|  |   } | ||
|  | 
 | ||
|  |   stack.next = stackStart; | ||
|  |   var stackIn = null; | ||
|  |   var stackOut = null; | ||
|  |   var mulSum = mulTable[radius]; | ||
|  |   var shgSum = shgTable[radius]; | ||
|  |   var p, rbs; | ||
|  |   var yw = 0, | ||
|  |       yi = 0; | ||
|  | 
 | ||
|  |   for (var y = 0; y < height; y++) { | ||
|  |     var pr = pixels[yi], | ||
|  |         pg = pixels[yi + 1], | ||
|  |         pb = pixels[yi + 2], | ||
|  |         rOutSum = radiusPlus1 * pr, | ||
|  |         gOutSum = radiusPlus1 * pg, | ||
|  |         bOutSum = radiusPlus1 * pb, | ||
|  |         rSum = sumFactor * pr, | ||
|  |         gSum = sumFactor * pg, | ||
|  |         bSum = sumFactor * pb; | ||
|  |     stack = stackStart; | ||
|  | 
 | ||
|  |     for (var _i5 = 0; _i5 < radiusPlus1; _i5++) { | ||
|  |       stack.r = pr; | ||
|  |       stack.g = pg; | ||
|  |       stack.b = pb; | ||
|  |       stack = stack.next; | ||
|  |     } | ||
|  | 
 | ||
|  |     var rInSum = 0, | ||
|  |         gInSum = 0, | ||
|  |         bInSum = 0; | ||
|  | 
 | ||
|  |     for (var _i6 = 1; _i6 < radiusPlus1; _i6++) { | ||
|  |       p = yi + ((widthMinus1 < _i6 ? widthMinus1 : _i6) << 2); | ||
|  |       rSum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - _i6); | ||
|  |       gSum += (stack.g = pg = pixels[p + 1]) * rbs; | ||
|  |       bSum += (stack.b = pb = pixels[p + 2]) * rbs; | ||
|  |       rInSum += pr; | ||
|  |       gInSum += pg; | ||
|  |       bInSum += pb; | ||
|  |       stack = stack.next; | ||
|  |     } | ||
|  | 
 | ||
|  |     stackIn = stackStart; | ||
|  |     stackOut = stackEnd; | ||
|  | 
 | ||
|  |     for (var x = 0; x < width; x++) { | ||
|  |       pixels[yi] = rSum * mulSum >>> shgSum; | ||
|  |       pixels[yi + 1] = gSum * mulSum >>> shgSum; | ||
|  |       pixels[yi + 2] = bSum * mulSum >>> shgSum; | ||
|  |       rSum -= rOutSum; | ||
|  |       gSum -= gOutSum; | ||
|  |       bSum -= bOutSum; | ||
|  |       rOutSum -= stackIn.r; | ||
|  |       gOutSum -= stackIn.g; | ||
|  |       bOutSum -= stackIn.b; | ||
|  |       p = yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1) << 2; | ||
|  |       rInSum += stackIn.r = pixels[p]; | ||
|  |       gInSum += stackIn.g = pixels[p + 1]; | ||
|  |       bInSum += stackIn.b = pixels[p + 2]; | ||
|  |       rSum += rInSum; | ||
|  |       gSum += gInSum; | ||
|  |       bSum += bInSum; | ||
|  |       stackIn = stackIn.next; | ||
|  |       rOutSum += pr = stackOut.r; | ||
|  |       gOutSum += pg = stackOut.g; | ||
|  |       bOutSum += pb = stackOut.b; | ||
|  |       rInSum -= pr; | ||
|  |       gInSum -= pg; | ||
|  |       bInSum -= pb; | ||
|  |       stackOut = stackOut.next; | ||
|  |       yi += 4; | ||
|  |     } | ||
|  | 
 | ||
|  |     yw += width; | ||
|  |   } | ||
|  | 
 | ||
|  |   for (var _x2 = 0; _x2 < width; _x2++) { | ||
|  |     yi = _x2 << 2; | ||
|  | 
 | ||
|  |     var _pr2 = pixels[yi], | ||
|  |         _pg2 = pixels[yi + 1], | ||
|  |         _pb2 = pixels[yi + 2], | ||
|  |         _rOutSum2 = radiusPlus1 * _pr2, | ||
|  |         _gOutSum2 = radiusPlus1 * _pg2, | ||
|  |         _bOutSum2 = radiusPlus1 * _pb2, | ||
|  |         _rSum2 = sumFactor * _pr2, | ||
|  |         _gSum2 = sumFactor * _pg2, | ||
|  |         _bSum2 = sumFactor * _pb2; | ||
|  | 
 | ||
|  |     stack = stackStart; | ||
|  | 
 | ||
|  |     for (var _i7 = 0; _i7 < radiusPlus1; _i7++) { | ||
|  |       stack.r = _pr2; | ||
|  |       stack.g = _pg2; | ||
|  |       stack.b = _pb2; | ||
|  |       stack = stack.next; | ||
|  |     } | ||
|  | 
 | ||
|  |     var _rInSum2 = 0, | ||
|  |         _gInSum2 = 0, | ||
|  |         _bInSum2 = 0; | ||
|  | 
 | ||
|  |     for (var _i8 = 1, yp = width; _i8 <= radius; _i8++) { | ||
|  |       yi = yp + _x2 << 2; | ||
|  |       _rSum2 += (stack.r = _pr2 = pixels[yi]) * (rbs = radiusPlus1 - _i8); | ||
|  |       _gSum2 += (stack.g = _pg2 = pixels[yi + 1]) * rbs; | ||
|  |       _bSum2 += (stack.b = _pb2 = pixels[yi + 2]) * rbs; | ||
|  |       _rInSum2 += _pr2; | ||
|  |       _gInSum2 += _pg2; | ||
|  |       _bInSum2 += _pb2; | ||
|  |       stack = stack.next; | ||
|  | 
 | ||
|  |       if (_i8 < heightMinus1) { | ||
|  |         yp += width; | ||
|  |       } | ||
|  |     } | ||
|  | 
 | ||
|  |     yi = _x2; | ||
|  |     stackIn = stackStart; | ||
|  |     stackOut = stackEnd; | ||
|  | 
 | ||
|  |     for (var _y2 = 0; _y2 < height; _y2++) { | ||
|  |       p = yi << 2; | ||
|  |       pixels[p] = _rSum2 * mulSum >>> shgSum; | ||
|  |       pixels[p + 1] = _gSum2 * mulSum >>> shgSum; | ||
|  |       pixels[p + 2] = _bSum2 * mulSum >>> shgSum; | ||
|  |       _rSum2 -= _rOutSum2; | ||
|  |       _gSum2 -= _gOutSum2; | ||
|  |       _bSum2 -= _bOutSum2; | ||
|  |       _rOutSum2 -= stackIn.r; | ||
|  |       _gOutSum2 -= stackIn.g; | ||
|  |       _bOutSum2 -= stackIn.b; | ||
|  |       p = _x2 + ((p = _y2 + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width << 2; | ||
|  |       _rSum2 += _rInSum2 += stackIn.r = pixels[p]; | ||
|  |       _gSum2 += _gInSum2 += stackIn.g = pixels[p + 1]; | ||
|  |       _bSum2 += _bInSum2 += stackIn.b = pixels[p + 2]; | ||
|  |       stackIn = stackIn.next; | ||
|  |       _rOutSum2 += _pr2 = stackOut.r; | ||
|  |       _gOutSum2 += _pg2 = stackOut.g; | ||
|  |       _bOutSum2 += _pb2 = stackOut.b; | ||
|  |       _rInSum2 -= _pr2; | ||
|  |       _gInSum2 -= _pg2; | ||
|  |       _bInSum2 -= _pb2; | ||
|  |       stackOut = stackOut.next; | ||
|  |       yi += width; | ||
|  |     } | ||
|  |   } | ||
|  | 
 | ||
|  |   return imageData; | ||
|  | } | ||
|  | /** | ||
|  |  * | ||
|  |  */ | ||
|  | 
 | ||
|  | 
 | ||
|  | var BlurStack = | ||
|  | /** | ||
|  |  * Set properties. | ||
|  |  */ | ||
|  | function BlurStack() { | ||
|  |   _classCallCheck(this, BlurStack); | ||
|  | 
 | ||
|  |   this.r = 0; | ||
|  |   this.g = 0; | ||
|  |   this.b = 0; | ||
|  |   this.a = 0; | ||
|  |   this.next = null; | ||
|  | }; | ||
|  | 
 | ||
|  | export { BlurStack, processCanvasRGB as canvasRGB, processCanvasRGBA as canvasRGBA, processImage as image, processImageDataRGB as imageDataRGB, processImageDataRGBA as imageDataRGBA }; |