jcc2d

Source: filters/BlurFilter.js

  2. import {Utils} from '../utils/Utils';
  4. /**
  5.  *
  6.  * @class
  7.  * @memberof JC
  8.  * @param {number} blurX x轴的模糊值
  9.  * @param {number} blurY y轴的模糊值
  10.  * @param {number} quality 模糊的质量，模糊计算会被递归多少次
  11.  */
  12. function BlurFilter(blurX, blurY, quality) {
  13.   if (Utils.isNumber(blurX) || blurX < 0) blurX = 0;
  14.   if (Utils.isNumber(blurY) || blurY < 0) blurY = 0;
  15.   if (Utils.isNumber(quality) || quality < 1) quality = 1;
  17.   /**
  18.    * x轴的模糊值
  19.    * @property blurX
  20.    * @default 0
  21.    * @type Number
  22.    **/
  23.   this.blurX = blurX | 0;
  25.   /**
  26.    * y轴的模糊值
  27.    * @property blurY
  28.    * @default 0
  29.    * @type Number
  30.    **/
  31.   this.blurY = blurY | 0;
  33.   /**
  34.    * 模糊的质量，模糊计算会被递归多少次
  35.    * @property quality
  36.    * @default 1
  37.    * @type Number
  38.    **/
  39.   this.quality = quality | 0;
  40. }
  42. /**
  43.  * 对渲染对象进行x、y轴同时设置模糊半径
  44.  *
  45.  * @member {number}
  46.  * @name blur
  47.  * @memberof JC.BlurFilter#
  48.  */
  49. Object.defineProperty(BlurFilter.prototype, 'blur', {
  50.   get: function() {
  51.     return this.blurX;
  52.   },
  53.   set: function(blur) {
  54.     this.blurX = this.blurY = blur;
  55.   },
  56. });
  58. /* eslint max-len: "off" */
  59. const MUL_TABLE = [1, 171, 205, 293, 57, 373, 79, 137, 241, 27, 391, 357, 41, 19, 283, 265, 497, 469, 443, 421, 25, 191, 365, 349, 335, 161, 155, 149, 9, 278, 269, 261, 505, 245, 475, 231, 449, 437, 213, 415, 405, 395, 193, 377, 369, 361, 353, 345, 169, 331, 325, 319, 313, 307, 301, 37, 145, 285, 281, 69, 271, 267, 263, 259, 509, 501, 493, 243, 479, 118, 465, 459, 113, 446, 55, 435, 429, 423, 209, 413, 51, 403, 199, 393, 97, 3, 379, 375, 371, 367, 363, 359, 355, 351, 347, 43, 85, 337, 333, 165, 327, 323, 5, 317, 157, 311, 77, 305, 303, 75, 297, 294, 73, 289, 287, 71, 141, 279, 277, 275, 68, 135, 67, 133, 33, 262, 260, 129, 511, 507, 503, 499, 495, 491, 61, 121, 481, 477, 237, 235, 467, 232, 115, 457, 227, 451, 7, 445, 221, 439, 218, 433, 215, 427, 425, 211, 419, 417, 207, 411, 409, 203, 202, 401, 399, 396, 197, 49, 389, 387, 385, 383, 95, 189, 47, 187, 93, 185, 23, 183, 91, 181, 45, 179, 89, 177, 11, 175, 87, 173, 345, 343, 341, 339, 337, 21, 167, 83, 331, 329, 327, 163, 81, 323, 321, 319, 159, 79, 315, 313, 39, 155, 309, 307, 153, 305, 303, 151, 75, 299, 149, 37, 295, 147, 73, 291, 145, 289, 287, 143, 285, 71, 141, 281, 35, 279, 139, 69, 275, 137, 273, 17, 271, 135, 269, 267, 133, 265, 33, 263, 131, 261, 130, 259, 129, 257, 1];
  62. const SHG_TABLE = [0, 9, 10, 11, 9, 12, 10, 11, 12, 9, 13, 13, 10, 9, 13, 13, 14, 14, 14, 14, 10, 13, 14, 14, 14, 13, 13, 13, 9, 14, 14, 14, 15, 14, 15, 14, 15, 15, 14, 15, 15, 15, 14, 15, 15, 15, 15, 15, 14, 15, 15, 15, 15, 15, 15, 12, 14, 15, 15, 13, 15, 15, 15, 15, 16, 16, 16, 15, 16, 14, 16, 16, 14, 16, 13, 16, 16, 16, 15, 16, 13, 16, 15, 16, 14, 9, 16, 16, 16, 16, 16, 16, 16, 16, 16, 13, 14, 16, 16, 15, 16, 16, 10, 16, 15, 16, 14, 16, 16, 14, 16, 16, 14, 16, 16, 14, 15, 16, 16, 16, 14, 15, 14, 15, 13, 16, 16, 15, 17, 17, 17, 17, 17, 17, 14, 15, 17, 17, 16, 16, 17, 16, 15, 17, 16, 17, 11, 17, 16, 17, 16, 17, 16, 17, 17, 16, 17, 17, 16, 17, 17, 16, 16, 17, 17, 17, 16, 14, 17, 17, 17, 17, 15, 16, 14, 16, 15, 16, 13, 16, 15, 16, 14, 16, 15, 16, 12, 16, 15, 16, 17, 17, 17, 17, 17, 13, 16, 15, 17, 17, 17, 16, 15, 17, 17, 17, 16, 15, 17, 17, 14, 16, 17, 17, 16, 17, 17, 16, 15, 17, 16, 14, 17, 16, 15, 17, 16, 17, 17, 16, 17, 15, 16, 17, 14, 17, 16, 15, 17, 16, 17, 13, 17, 16, 17, 17, 16, 17, 14, 17, 16, 17, 16, 17, 16, 17, 9];
  64. /* eslint-disable */
  65. BlurFilter.prototype.applyFilter = function(imageData) {
  67.     var radiusX = this.blurX >> 1;
  68.     if (isNaN(radiusX) || radiusX < 0) return false;
  69.     var radiusY = this.blurY >> 1;
  70.     if (isNaN(radiusY) || radiusY < 0) return false;
  71.     if (radiusX == 0 && radiusY == 0) return false;
  73.     var iterations = this.quality;
  74.     if (isNaN(iterations) || iterations < 1) iterations = 1;
  75.     iterations |= 0;
  76.     if (iterations > 3) iterations = 3;
  77.     if (iterations < 1) iterations = 1;
  79.     var px = imageData.data;
  80.     var x = 0,
  81.         y = 0,
  82.         i = 0,
  83.         p = 0,
  84.         yp = 0,
  85.         yi = 0,
  86.         yw = 0,
  87.         r = 0,
  88.         g = 0,
  89.         b = 0,
  90.         a = 0,
  91.         pr = 0,
  92.         pg = 0,
  93.         pb = 0,
  94.         pa = 0;
  96.     var divx = (radiusX + radiusX + 1) | 0;
  97.     var divy = (radiusY + radiusY + 1) | 0;
  98.     var w = imageData.width | 0;
  99.     var h = imageData.height | 0;
  101.     var w1 = (w - 1) | 0;
  102.     var h1 = (h - 1) | 0;
  103.     var rxp1 = (radiusX + 1) | 0;
  104.     var ryp1 = (radiusY + 1) | 0;
  106.     var ssx = { r: 0, b: 0, g: 0, a: 0 };
  107.     var sx = ssx;
  108.     for (i = 1; i < divx; i++) {
  109.         sx = sx.n = { r: 0, b: 0, g: 0, a: 0 };
  110.     }
  111.     sx.n = ssx;
  113.     var ssy = { r: 0, b: 0, g: 0, a: 0 };
  114.     var sy = ssy;
  115.     for (i = 1; i < divy; i++) {
  116.         sy = sy.n = { r: 0, b: 0, g: 0, a: 0 };
  117.     }
  118.     sy.n = ssy;
  120.     var si = null;
  123.     var mtx = MUL_TABLE[radiusX] | 0;
  124.     var stx = SHG_TABLE[radiusX] | 0;
  125.     var mty = MUL_TABLE[radiusY] | 0;
  126.     var sty = SHG_TABLE[radiusY] | 0;
  128.     while (iterations-- > 0) {
  130.         yw = yi = 0;
  131.         var ms = mtx;
  132.         var ss = stx;
  133.         for (y = h; --y > -1;) {
  134.             r = rxp1 * (pr = px[(yi) | 0]);
  135.             g = rxp1 * (pg = px[(yi + 1) | 0]);
  136.             b = rxp1 * (pb = px[(yi + 2) | 0]);
  137.             a = rxp1 * (pa = px[(yi + 3) | 0]);
  139.             sx = ssx;
  141.             for (i = rxp1; --i > -1;) {
  142.                 sx.r = pr;
  143.                 sx.g = pg;
  144.                 sx.b = pb;
  145.                 sx.a = pa;
  146.                 sx = sx.n;
  147.             }
  149.             for (i = 1; i < rxp1; i++) {
  150.                 p = (yi + ((w1 < i ? w1 : i) << 2)) | 0;
  151.                 r += (sx.r = px[p]);
  152.                 g += (sx.g = px[p + 1]);
  153.                 b += (sx.b = px[p + 2]);
  154.                 a += (sx.a = px[p + 3]);
  156.                 sx = sx.n;
  157.             }
  159.             si = ssx;
  160.             for (x = 0; x < w; x++) {
  161.                 px[yi++] = (r * ms) >>> ss;
  162.                 px[yi++] = (g * ms) >>> ss;
  163.                 px[yi++] = (b * ms) >>> ss;
  164.                 px[yi++] = (a * ms) >>> ss;
  166.                 p = ((yw + ((p = x + radiusX + 1) < w1 ? p : w1)) << 2);
  168.                 r -= si.r - (si.r = px[p]);
  169.                 g -= si.g - (si.g = px[p + 1]);
  170.                 b -= si.b - (si.b = px[p + 2]);
  171.                 a -= si.a - (si.a = px[p + 3]);
  173.                 si = si.n;
  175.             }
  176.             yw += w;
  177.         }
  179.         ms = mty;
  180.         ss = sty;
  181.         for (x = 0; x < w; x++) {
  182.             yi = (x << 2) | 0;
  184.             r = (ryp1 * (pr = px[yi])) | 0;
  185.             g = (ryp1 * (pg = px[(yi + 1) | 0])) | 0;
  186.             b = (ryp1 * (pb = px[(yi + 2) | 0])) | 0;
  187.             a = (ryp1 * (pa = px[(yi + 3) | 0])) | 0;
  189.             sy = ssy;
  190.             for (i = 0; i < ryp1; i++) {
  191.                 sy.r = pr;
  192.                 sy.g = pg;
  193.                 sy.b = pb;
  194.                 sy.a = pa;
  195.                 sy = sy.n;
  196.             }
  198.             yp = w;
  200.             for (i = 1; i <= radiusY; i++) {
  201.                 yi = (yp + x) << 2;
  203.                 r += (sy.r = px[yi]);
  204.                 g += (sy.g = px[yi + 1]);
  205.                 b += (sy.b = px[yi + 2]);
  206.                 a += (sy.a = px[yi + 3]);
  208.                 sy = sy.n;
  210.                 if (i < h1) {
  211.                     yp += w;
  212.                 }
  213.             }
  215.             yi = x;
  216.             si = ssy;
  217.             if (iterations > 0) {
  218.                 for (y = 0; y < h; y++) {
  219.                     p = yi << 2;
  220.                     px[p + 3] = pa = (a * ms) >>> ss;
  221.                     if (pa > 0) {
  222.                         px[p] = ((r * ms) >>> ss);
  223.                         px[p + 1] = ((g * ms) >>> ss);
  224.                         px[p + 2] = ((b * ms) >>> ss);
  225.                     } else {
  226.                         px[p] = px[p + 1] = px[p + 2] = 0;
  227.                     }
  229.                     p = (x + (((p = y + ryp1) < h1 ? p : h1) * w)) << 2;
  231.                     r -= si.r - (si.r = px[p]);
  232.                     g -= si.g - (si.g = px[p + 1]);
  233.                     b -= si.b - (si.b = px[p + 2]);
  234.                     a -= si.a - (si.a = px[p + 3]);
  236.                     si = si.n;
  238.                     yi += w;
  239.                 }
  240.             } else {
  241.                 for (y = 0; y < h; y++) {
  242.                     p = yi << 2;
  243.                     px[p + 3] = pa = (a * ms) >>> ss;
  244.                     if (pa > 0) {
  245.                         pa = 255 / pa;
  246.                         px[p] = ((r * ms) >>> ss) * pa;
  247.                         px[p + 1] = ((g * ms) >>> ss) * pa;
  248.                         px[p + 2] = ((b * ms) >>> ss) * pa;
  249.                     } else {
  250.                         px[p] = px[p + 1] = px[p + 2] = 0;
  251.                     }
  253.                     p = (x + (((p = y + ryp1) < h1 ? p : h1) * w)) << 2;
  255.                     r -= si.r - (si.r = px[p]);
  256.                     g -= si.g - (si.g = px[p + 1]);
  257.                     b -= si.b - (si.b = px[p + 2]);
  258.                     a -= si.a - (si.a = px[p + 3]);
  260.                     si = si.n;
  262.                     yi += w;
  263.                 }
  264.             }
  265.         }
  267.     }
  268.     return true;
  269. };
  271. export { BlurFilter };