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