(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ? define(['exports'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.StackBlur = {})); }(this, (function (exports) { 'use strict'; 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; }; exports.BlurStack = BlurStack; exports.canvasRGB = processCanvasRGB; exports.canvasRGBA = processCanvasRGBA; exports.image = processImage; exports.imageDataRGB = processImageDataRGB; exports.imageDataRGBA = processImageDataRGBA; Object.defineProperty(exports, '__esModule', { value: true }); })));