API tools faq
paste
Advertisement
Guest User

Ffffffffffff

a guest
Apr 8th, 2020
225
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 34.81 KB | None | 0 0
raw download clone embed print report
  1. <div class="G2Vk3A" style="width: 600; height: 160028; transform: translate(0px) rotate(0deg);">
  2.     <svg class="UM3_lA" viewBox="0 0 600 600" preserveAspectRatio="none">
  3.         <defs>
  4.             <filter id="filter" color-interpolation-filters="sRGB">
  5.                 <feComponentTransfer></feComponentTransfer>
  6.             </filter>
  7.         </defs>
  8.         <image crossorigin="anonymous" xlink:href="https://i.imgur.com/p2B0TrF.jpg" width="600" height="600"
  9.             filter="url(#filter)"></image>
  10.     </svg>
  11.  
  12.     <div id="filterPanel">
  13.         FILTER PANEL
  14.         url(#filter1)
  15.     </div>
  16. </div>
  17.  
  18. <script>
  19.  
  20.     const filtersArray = [{
  21.         "name": "epic",
  22.         "params": [
  23.             {
  24.                 "name": "brightness",
  25.                 "val": 12,
  26.                 "wh": {
  27.                     "w": 600,
  28.                     "h": 600
  29.                 }
  30.             },
  31.             {
  32.                 "name": "contrast",
  33.                 "val": -40,
  34.                 "wh": {
  35.                     "w": 600,
  36.                     "h": 600
  37.                 }
  38.             },
  39.             {
  40.                 "name": "saturation",
  41.                 "val": -28,
  42.                 "wh": {
  43.                     "w": 600,
  44.                     "h": 600
  45.                 }
  46.             },
  47.             {
  48.                 "name": "crossProcess",
  49.                 "val": 100,
  50.                 "wh": {
  51.                     "w": 600,
  52.                     "h": 600
  53.                 }
  54.             }
  55.         ]
  56.     },
  57.     {
  58.         "name": "festive",
  59.         "params": [
  60.             {
  61.                 "name": "brightness",
  62.                 "val": 20,
  63.                 "wh": {
  64.                     "w": 600,
  65.                     "h": 600
  66.                 }
  67.             },
  68.             {
  69.                 "name": "contrast",
  70.                 "val": 42,
  71.                 "wh": {
  72.                     "w": 600,
  73.                     "h": 600
  74.                 }
  75.             },
  76.             {
  77.                 "name": "saturation",
  78.                 "val": 48,
  79.                 "wh": {
  80.                     "w": 600,
  81.                     "h": 600
  82.                 }
  83.             },
  84.             {
  85.                 "name": "blur",
  86.                 "val": -14,
  87.                 "wh": {
  88.                     "w": 600,
  89.                     "h": 600
  90.                 }
  91.             },
  92.             {
  93.                 "name": "crossProcess",
  94.                 "val": 80,
  95.                 "wh": {
  96.                     "w": 600,
  97.                     "h": 600
  98.                 }
  99.             }
  100.         ]
  101.     },
  102.     {
  103.         "name": "summer",
  104.         "params": [
  105.             {
  106.                 "name": "brightness",
  107.                 "val": 20,
  108.                 "wh": {
  109.                     "w": 600,
  110.                     "h": 600
  111.                 }
  112.             },
  113.             {
  114.                 "name": "contrast",
  115.                 "val": 28,
  116.                 "wh": {
  117.                     "w": 600,
  118.                     "h": 600
  119.                 }
  120.             },
  121.             {
  122.                 "name": "saturation",
  123.                 "val": 36,
  124.                 "wh": {
  125.                     "w": 600,
  126.                     "h": 600
  127.                 }
  128.             },
  129.             {
  130.                 "name": "hue",
  131.                 "val": -46,
  132.                 "wh": {
  133.                     "w": 600,
  134.                     "h": 600
  135.                 }
  136.             },
  137.             {
  138.                 "name": "crossProcess",
  139.                 "val": 60,
  140.                 "wh": {
  141.                     "w": 600,
  142.                     "h": 600
  143.                 }
  144.             }
  145.         ]
  146.     },
  147.     {
  148.         "name": "afterglow",
  149.         "params": [
  150.             {
  151.                 "name": "brightness",
  152.                 "val": 30,
  153.                 "wh": {
  154.                     "w": 600,
  155.                     "h": 600
  156.                 }
  157.             },
  158.             {
  159.                 "name": "contrast",
  160.                 "val": 38,
  161.                 "wh": {
  162.                     "w": 600,
  163.                     "h": 600
  164.                 }
  165.             },
  166.             {
  167.                 "name": "saturation",
  168.                 "val": -24,
  169.                 "wh": {
  170.                     "w": 600,
  171.                     "h": 600
  172.                 }
  173.             },
  174.             {
  175.                 "name": "blur",
  176.                 "val": -46,
  177.                 "wh": {
  178.                     "w": 600,
  179.                     "h": 600
  180.                 }
  181.             }
  182.         ]
  183.     },
  184.     {
  185.         "name": "solar",
  186.         "params": [
  187.             {
  188.                 "name": "brightness",
  189.                 "val": 36,
  190.                 "wh": {
  191.                     "w": 600,
  192.                     "h": 600
  193.                 }
  194.             },
  195.             {
  196.                 "name": "contrast",
  197.                 "val": 30,
  198.                 "wh": {
  199.                     "w": 600,
  200.                     "h": 600
  201.                 }
  202.             },
  203.             {
  204.                 "name": "saturation",
  205.                 "val": 84,
  206.                 "wh": {
  207.                     "w": 600,
  208.                     "h": 600
  209.                 }
  210.             }
  211.         ]
  212.     },
  213.     {
  214.         "name": "selfie",
  215.         "params": [
  216.             {
  217.                 "name": "brightness",
  218.                 "val": 60,
  219.                 "wh": {
  220.                     "w": 600,
  221.                     "h": 600
  222.                 }
  223.             },
  224.             {
  225.                 "name": "hue",
  226.                 "val": -52,
  227.                 "wh": {
  228.                     "w": 600,
  229.                     "h": 600
  230.                 }
  231.             },
  232.             {
  233.                 "name": "crossProcess",
  234.                 "val": 100,
  235.                 "wh": {
  236.                     "w": 600,
  237.                     "h": 600
  238.                 }
  239.             }
  240.         ]
  241.     },
  242.     {
  243.         "name": "cali",
  244.         "params": [
  245.             {
  246.                 "name": "brightness",
  247.                 "val": 44,
  248.                 "wh": {
  249.                     "w": 600,
  250.                     "h": 600
  251.                 }
  252.             },
  253.             {
  254.                 "name": "contrast",
  255.                 "val": -92,
  256.                 "wh": {
  257.                     "w": 600,
  258.                     "h": 600
  259.                 }
  260.             },
  261.             {
  262.                 "name": "saturation",
  263.                 "val": 76,
  264.                 "wh": {
  265.                     "w": 600,
  266.                     "h": 600
  267.                 }
  268.             },
  269.             {
  270.                 "name": "crossProcess",
  271.                 "val": 54,
  272.                 "wh": {
  273.                     "w": 600,
  274.                     "h": 600
  275.                 }
  276.             }
  277.         ]
  278.     },
  279.     {
  280.         "name": "the blues",
  281.         "params": [
  282.             {
  283.                 "name": "brightness",
  284.                 "val": 88,
  285.                 "wh": {
  286.                     "w": 600,
  287.                     "h": 600
  288.                 }
  289.             },
  290.             {
  291.                 "name": "contrast",
  292.                 "val": -76,
  293.                 "wh": {
  294.                     "w": 600,
  295.                     "h": 600
  296.                 }
  297.             },
  298.             {
  299.                 "name": "saturation",
  300.                 "val": -52,
  301.                 "wh": {
  302.                     "w": 600,
  303.                     "h": 600
  304.                 }
  305.             },
  306.             {
  307.                 "name": "blur",
  308.                 "val": -28,
  309.                 "wh": {
  310.                     "w": 600,
  311.                     "h": 600
  312.                 }
  313.             },
  314.             {
  315.                 "name": "crossProcess",
  316.                 "val": -46,
  317.                 "wh": {
  318.                     "w": 600,
  319.                     "h": 600
  320.                 }
  321.             }
  322.         ]
  323.     },
  324.     {
  325.         "name": "nordic",
  326.         "params": [
  327.             {
  328.                 "name": "brightness",
  329.                 "val": 30,
  330.                 "wh": {
  331.                     "w": 600,
  332.                     "h": 600
  333.                 }
  334.             },
  335.             {
  336.                 "name": "contrast",
  337.                 "val": -32,
  338.                 "wh": {
  339.                     "w": 600,
  340.                     "h": 600
  341.                 }
  342.             },
  343.             {
  344.                 "name": "saturation",
  345.                 "val": -100,
  346.                 "wh": {
  347.                     "w": 600,
  348.                     "h": 600
  349.                 }
  350.             }
  351.         ]
  352.     },
  353.     {
  354.         "name": "whimsical",
  355.         "params": [
  356.             {
  357.                 "name": "brightness",
  358.                 "val": 86,
  359.                 "wh": {
  360.                     "w": 600,
  361.                     "h": 600
  362.                 }
  363.             },
  364.             {
  365.                 "name": "contrast",
  366.                 "val": -20,
  367.                 "wh": {
  368.                     "w": 600,
  369.                     "h": 600
  370.                 }
  371.             },
  372.             {
  373.                 "name": "saturation",
  374.                 "val": -100,
  375.                 "wh": {
  376.                     "w": 600,
  377.                     "h": 600
  378.                 }
  379.             },
  380.             {
  381.                 "name": "hue",
  382.                 "val": -79,
  383.                 "wh": {
  384.                     "w": 600,
  385.                     "h": 600
  386.                 }
  387.             },
  388.             {
  389.                 "name": "blur",
  390.                 "val": -38,
  391.                 "wh": {
  392.                     "w": 600,
  393.                     "h": 600
  394.                 }
  395.             },
  396.             {
  397.                 "name": "crossProcess",
  398.                 "val": 100,
  399.                 "wh": {
  400.                     "w": 600,
  401.                     "h": 600
  402.                 }
  403.             }
  404.         ]
  405.     },
  406.     {
  407.         "name": "retro",
  408.         "params": [
  409.             {
  410.                 "name": "brightness",
  411.                 "val": 20,
  412.                 "wh": {
  413.                     "w": 600,
  414.                     "h": 600
  415.                 }
  416.             },
  417.             {
  418.                 "name": "contrast",
  419.                 "val": -30,
  420.                 "wh": {
  421.                     "w": 600,
  422.                     "h": 600
  423.                 }
  424.             },
  425.             {
  426.                 "name": "saturation",
  427.                 "val": -36,
  428.                 "wh": {
  429.                     "w": 600,
  430.                     "h": 600
  431.                 }
  432.             },
  433.             {
  434.                 "name": "hue",
  435.                 "val": 14,
  436.                 "wh": {
  437.                     "w": 600,
  438.                     "h": 600
  439.                 }
  440.             },
  441.             {
  442.                 "name": "crossProcess",
  443.                 "val": 100,
  444.                 "wh": {
  445.                     "w": 600,
  446.                     "h": 600
  447.                 }
  448.             }
  449.         ]
  450.     },
  451.     {
  452.         "name": "edge",
  453.         "params": [
  454.             {
  455.                 "name": "brightness",
  456.                 "val": 20,
  457.                 "wh": {
  458.                     "w": 600,
  459.                     "h": 600
  460.                 }
  461.             },
  462.             {
  463.                 "name": "contrast",
  464.                 "val": -48,
  465.                 "wh": {
  466.                     "w": 600,
  467.                     "h": 600
  468.                 }
  469.             },
  470.             {
  471.                 "name": "saturation",
  472.                 "val": 52,
  473.                 "wh": {
  474.                     "w": 600,
  475.                     "h": 600
  476.                 }
  477.             },
  478.             {
  479.                 "name": "hue",
  480.                 "val": 49,
  481.                 "wh": {
  482.                     "w": 600,
  483.                     "h": 600
  484.                 }
  485.             },
  486.             {
  487.                 "name": "blur",
  488.                 "val": -100,
  489.                 "wh": {
  490.                     "w": 600,
  491.                     "h": 600
  492.                 }
  493.             },
  494.             {
  495.                 "name": "crossProcess",
  496.                 "val": 58,
  497.                 "wh": {
  498.                     "w": 600,
  499.                     "h": 600
  500.                 }
  501.             }
  502.         ]
  503.     },
  504.     {
  505.         "name": "dalliance",
  506.         "params": [
  507.             {
  508.                 "name": "brightness",
  509.                 "val": 36,
  510.                 "wh": {
  511.                     "w": 600,
  512.                     "h": 600
  513.                 }
  514.             },
  515.             {
  516.                 "name": "contrast",
  517.                 "val": -44,
  518.                 "wh": {
  519.                     "w": 600,
  520.                     "h": 600
  521.                 }
  522.             },
  523.             {
  524.                 "name": "saturation",
  525.                 "val": 100,
  526.                 "wh": {
  527.                     "w": 600,
  528.                     "h": 600
  529.                 }
  530.             },
  531.             {
  532.                 "name": "hue",
  533.                 "val": 75,
  534.                 "wh": {
  535.                     "w": 600,
  536.                     "h": 600
  537.                 }
  538.             },
  539.             {
  540.                 "name": "blur",
  541.                 "val": -46,
  542.                 "wh": {
  543.                     "w": 600,
  544.                     "h": 600
  545.                 }
  546.             }
  547.         ]
  548.     },
  549.     {
  550.         "name": "peoni",
  551.         "params": [
  552.             {
  553.                 "name": "brightness",
  554.                 "val": 20,
  555.                 "wh": {
  556.                     "w": 600,
  557.                     "h": 600
  558.                 }
  559.             },
  560.             {
  561.                 "name": "contrast",
  562.                 "val": 42,
  563.                 "wh": {
  564.                     "w": 600,
  565.                     "h": 600
  566.                 }
  567.             },
  568.             {
  569.                 "name": "saturation",
  570.                 "val": 100,
  571.                 "wh": {
  572.                     "w": 600,
  573.                     "h": 600
  574.                 }
  575.             },
  576.             {
  577.                 "name": "hue",
  578.                 "val": 100,
  579.                 "wh": {
  580.                     "w": 600,
  581.                     "h": 600
  582.                 }
  583.             },
  584.             {
  585.                 "name": "blur",
  586.                 "val": -20,
  587.                 "wh": {
  588.                     "w": 600,
  589.                     "h": 600
  590.                 }
  591.             }
  592.         ]
  593.     },
  594.     {
  595.         "name": "dare",
  596.         "params": [
  597.             {
  598.                 "name": "contrast",
  599.                 "val": 88,
  600.                 "wh": {
  601.                     "w": 600,
  602.                     "h": 600
  603.                 }
  604.             },
  605.             {
  606.                 "name": "saturation",
  607.                 "val": 96,
  608.                 "wh": {
  609.                     "w": 600,
  610.                     "h": 600
  611.                 }
  612.             },
  613.             {
  614.                 "name": "hue",
  615.                 "val": -46,
  616.                 "wh": {
  617.                     "w": 600,
  618.                     "h": 600
  619.                 }
  620.             },
  621.             {
  622.                 "name": "blur",
  623.                 "val": -20,
  624.                 "wh": {
  625.                     "w": 600,
  626.                     "h": 600
  627.                 }
  628.             }
  629.         ]
  630.     },
  631.     {
  632.         "name": "rosie",
  633.         "params": [
  634.             {
  635.                 "name": "contrast",
  636.                 "val": 100,
  637.                 "wh": {
  638.                     "w": 600,
  639.                     "h": 600
  640.                 }
  641.             },
  642.             {
  643.                 "name": "saturation",
  644.                 "val": -56,
  645.                 "wh": {
  646.                     "w": 600,
  647.                     "h": 600
  648.                 }
  649.             },
  650.             {
  651.                 "name": "hue",
  652.                 "val": -73,
  653.                 "wh": {
  654.                     "w": 600,
  655.                     "h": 600
  656.                 }
  657.             },
  658.             {
  659.                 "name": "blur",
  660.                 "val": -28,
  661.                 "wh": {
  662.                     "w": 600,
  663.                     "h": 600
  664.                 }
  665.             },
  666.             {
  667.                 "name": "crossProcess",
  668.                 "val": 54,
  669.                 "wh": {
  670.                     "w": 600,
  671.                     "h": 600
  672.                 }
  673.             }
  674.         ]
  675.     },
  676.     {
  677.         "name": "drama",
  678.         "params": [
  679.             {
  680.                 "name": "brightness",
  681.                 "val": -20,
  682.                 "wh": {
  683.                     "w": 600,
  684.                     "h": 600
  685.                 }
  686.             },
  687.             {
  688.                 "name": "contrast",
  689.                 "val": 42,
  690.                 "wh": {
  691.                     "w": 600,
  692.                     "h": 600
  693.                 }
  694.             },
  695.             {
  696.                 "name": "saturation",
  697.                 "val": -68,
  698.                 "wh": {
  699.                     "w": 600,
  700.                     "h": 600
  701.                 }
  702.             },
  703.             {
  704.                 "name": "hue",
  705.                 "val": 60,
  706.                 "wh": {
  707.                     "w": 600,
  708.                     "h": 600
  709.                 }
  710.             },
  711.             {
  712.                 "name": "crossProcess",
  713.                 "val": 100,
  714.                 "wh": {
  715.                     "w": 600,
  716.                     "h": 600
  717.                 }
  718.             }
  719.         ]
  720.     },
  721.     {
  722.         "name": "grayscale",
  723.         "params": [
  724.             {
  725.                 "name": "brightness",
  726.                 "val": 30,
  727.                 "wh": {
  728.                     "w": 600,
  729.                     "h": 600
  730.                 }
  731.             },
  732.             {
  733.                 "name": "contrast",
  734.                 "val": -40,
  735.                 "wh": {
  736.                     "w": 600,
  737.                     "h": 600
  738.                 }
  739.             },
  740.             {
  741.                 "name": "saturation",
  742.                 "val": -100,
  743.                 "wh": {
  744.                     "w": 600,
  745.                     "h": 600
  746.                 }
  747.             }
  748.         ]
  749.     },
  750.     {
  751.         "name": "street",
  752.         "params": [
  753.             {
  754.                 "name": "brightness",
  755.                 "val": -14,
  756.                 "wh": {
  757.                     "w": 600,
  758.                     "h": 600
  759.                 }
  760.             },
  761.             {
  762.                 "name": "contrast",
  763.                 "val": 42,
  764.                 "wh": {
  765.                     "w": 600,
  766.                     "h": 600
  767.                 }
  768.             },
  769.             {
  770.                 "name": "saturation",
  771.                 "val": -100,
  772.                 "wh": {
  773.                     "w": 600,
  774.                     "h": 600
  775.                 }
  776.             },
  777.             {
  778.                 "name": "blur",
  779.                 "val": -14,
  780.                 "wh": {
  781.                     "w": 600,
  782.                     "h": 600
  783.                 }
  784.             }
  785.         ]
  786.     }
  787.     ];
  788.  
  789.     var filters = {
  790.         getFilters(filters = []) {
  791.             var res = [];
  792.             filters.forEach((f, i) => {
  793.                 if (typeof this[f.name] != 'undefined') {
  794.                     const str = this[f.name](f);
  795.  
  796.                     console.log(f.name, f.val);
  797.                     if (str) {
  798.                         res.push(str);
  799.                     }
  800.                 }
  801.             });
  802.  
  803.             return (res.length ? res : ['<feComponentTransfer></feComponentTransfer>']).join('');
  804.         },
  805.  
  806.         hue(params) {
  807.             if (params.val === 0) return;
  808.  
  809.             var b = { rf: params.val, lh: 50 };
  810.  
  811.             function Yr(a, b, c) {
  812.                 0 > c && (c += 1);
  813.                 1 < c && --c;
  814.                 return c < 1 / 6 ? a + 6 * (b - a) * c : .5 > c ? b : c < 2 / 3 ? a + (b - a) * (2 / 3 - c) * 6 : a;
  815.             }
  816.  
  817.             let a = b.lh / 500;
  818.             if (a == 0) return;
  819.             b = ((b.rf / 200 + .5 - 1 / 7) % 1 + 1) % 1;
  820.             let c = 1, d = 1 - c;
  821.             b = {
  822.                 r: Yr(d, c, b + 1 / 3),
  823.                 g: Yr(d, c, b),
  824.                 b: Yr(d, c, b - 1 / 3)
  825.             };
  826.  
  827.             c = b.g;
  828.             d = b.b;
  829.  
  830.             return `<feComponentTransfer>
  831.                     <feFuncR type="linear" slope="${1 - a}" intercept="${b.r * a}"></feFuncR>
  832.                     <feFuncG type="linear" slope="${1 - a}" intercept="${c * a}"></feFuncG>
  833.                     <feFuncB type="linear" slope="${1 - a}" intercept="${d * a}"></feFuncB>
  834.                 </feComponentTransfer>`;
  835.         },
  836.  
  837.         brightness: function (params) { //-100-100
  838.             if (params.val === 0) return;
  839.             var val = params.val / 200 /* (0.5 * params.val / 100).toFixed(3) */;
  840.  
  841.             console.log(val);
  842.             return `<feComponentTransfer>
  843.                     <feFuncR type="linear" slope="1" intercept="${val}"></feFuncR>
  844.                     <feFuncG type="linear" slope="1" intercept="${val}"></feFuncG>
  845.                     <feFuncB type="linear" slope="1" intercept="${val}"></feFuncB>
  846.                 </feComponentTransfer>`;
  847.         },
  848.         contrast: function (params) {
  849.             if (params.val === 0) return;
  850.  
  851.             /* var slope = this.conv(params.val, 0.4, 2.5);
  852.             var intercept = this.conv(params.val, 0.3, -0.75); */
  853.  
  854.             let a = params.val / 100 * .6;
  855.             if (0 === a) return;
  856.  
  857.             a = 0 < a ? 1 / (1 - a) : 1 + a;
  858.             const b = -(.5 * a) + .5;
  859.  
  860.             var res = `<feComponentTransfer>
  861.             <feFuncR type="linear" slope="${a}" intercept="${b}"></feFuncR>
  862.             <feFuncG type="linear" slope="${a}" intercept="${b}"></feFuncG>
  863.             <feFuncB type="linear" slope="${a}" intercept="${b}"></feFuncB>
  864.         </feComponentTransfer>`
  865.             return res;
  866.         },
  867.         saturation: function (params) {
  868.             if (params.val === 0) return;
  869.  
  870.             /* var pairs = [[0.3086, 1.6914], [0.6094, -0.6094], [0.082, -0.082], [0, 0], [0, 0], [0.3086, -0.3086], [0.6094, 1.3906], [0.082, -0.082], [0, 0], [0, 0], [0.3086, -0.3086], [0.6094, -0.6094], [0.082, 1.918],];
  871.             var matrix = [];
  872.             pairs.forEach((v) => {
  873.                 matrix.push(this.conv(params.val, v[0], v[1]));
  874.             });
  875.             matrix.push("0 0 0 0 0 1 0"); */
  876.  
  877.             let a = params.val / 100 + 1;
  878.             if (1 === a) return;
  879.  
  880.             const b = .3086 * (1 - a);
  881.             const c = .6094 * (1 - a);
  882.             const d = .082 * (1 - a);
  883.  
  884.             return `<feColorMatrix type="matrix"
  885.                 values="${[b + a, c, d, 0, 0, b, c + a, d, 0, 0, b, c, d + a, 0, 0, 0, 0, 0, 1, 0].join(' ')}">
  886.             </feColorMatrix>`;
  887.         },
  888.  
  889.         //var ff = filters.getFilters([{name: "blur", val: -100, wh: {w: 128, h: 128} } ]);
  890.         blur: function (params) {
  891.             if (params.val === 0) return;
  892.  
  893.             if (params.val > 0) {
  894.                 var max = params.wh.w * 0.05;
  895.                 var vv = this.conv(params.val, 0, max);
  896.                 return `<feGaussianBlur stdDeviation="${vv}"></feGaussianBlur>`;
  897.             } else if (params.val < 0) {
  898.                 var blur = params.wh.w * 0.0015;
  899.                 var k1 = this.conv(params.val, 0, 0);
  900.                 var k2 = this.conv(params.val, -0.06, 6);
  901.                 var k3 = this.conv(params.val * -1, 1.06, 7);
  902.                 var k4 = 0;
  903.  
  904.                 return `
  905.             <feComponentTransfer result="preblur"></feComponentTransfer>
  906.             <feGaussianBlur stdDeviation="${blur}"></feGaussianBlur>
  907.             <feComponentTransfer><feFuncA type="table" tableValues="0 1 1 1"></feFuncA></feComponentTransfer>
  908.             <feComposite operator="arithmetic" k1="${k1}" k2="${k2}" k3="${k3}" k4="${k4}" in2="preblur"></feComposite>`;
  909.             }
  910.  
  911.         },
  912.  
  913.         crossProcess: function (params) {
  914.             if (params.val === 0) return;
  915.  
  916.             /* var pairs_r = [["0", "0"], ["0.018546631163103112", "0"], ["0.036563090132369254", "0"], ["0.05351920471396142", "0"], ["0.06888480271404268", "0.001201887041747698"], ["0.08212971193877604", "0.00815699822491688"], ["0.09272376019432449", "0.019548535689907564"], ["0.10013677528685111", "0.03626378469308406"], ["0.10383858502251889", "0.05919003049081066"], ["0.10329901720749086", "0.08921455833945166"], ["0.09808447604792396", "0.1271316565773867"], ["0.08900374495505535", "0.17253928155041756"], ["0.07772789187743862", "0.22420506455183506"], ["0.06594534963942325", "0.28087991560627334"], ["0.05534455106535869", "0.34131474473836626"], ["0.047613928979594544", "0.4042604619727479"], ["0.044441916206480234", "0.46846797733405227"], ["0.04751694557036534", "0.5326882008469132"], ["0.05852744989559917", "0.5956720425359648"], ["0.07916186200653139", "0.6561704124258413"], ["0.11110861472751156", "0.7129342205411767"], ["0.15605614088288894", "0.7647143769066046"], ["0.21568426274775512", "0.8102664150687151"], ["0.2905102215098147", "0.8489701283073448"], ["0.37872533106876044", "0.8814542402041557"], ["0.47824392651731956", "0.908496200926875"], ["0.5869803429482184", "0.93087346064323"], ["0.7028489154541844", "0.9493634695209482"], ["0.8237639791279442", "0.9647436777277569"], ["0.9476398690622253", "0.9777915354313835"], ["1", "0.9892844927995555"], ["1", "1"]];
  917.             var pairs_g = [["0", "0"], ["0.01265830762650567", "0.05938442699171673"], ["0.025971185421494163", "0.11796530615292077"], ["0.04059320355344828", "0.17493908965309943"], ["0.05717893219085087", "0.22950222966174008"], ["0.07638294150218472", "0.28085117834833"], ["0.09885980165593265", "0.32818238788235643"], ["0.12526408282057752", "0.37069231043330686"], ["0.15624803518077382", "0.407580364535447"], ["0.1920758124814897", "0.4385421944274188"], ["0.23219179750014032", "0.4643216153285879"], ["0.27593626597242793", "0.4857955552231419"], ["0.3226494936340549", "0.5038409420952686"], ["0.3716717562207237", "0.5193347039291559"], ["0.4223433294681365", "0.5331537687089917"], ["0.4740044891119959", "0.546175064418964"], ["0.5259955108880041", "0.5592755190432603"], ["0.5776566705318634", "0.5733320605660687"], ["0.6283282437792762", "0.5892216169715769"], ["0.6773505063659451", "0.607808978603834"], ["0.7240637340275722", "0.6294870850464945"], ["0.7678082024998597", "0.6540359250562033"], ["0.8079241875185104", "0.6811945228541384"], ["0.8437519648192263", "0.7107019026614771"], ["0.8747359171794225", "0.7422970886993968"], ["0.9011401983440674", "0.7757191051890745"], ["0.9236170584978154", "0.8107069763516883"], ["0.9428210678091492", "0.8469997264084148"], ["0.9594067964465517", "0.8843363795804319"], ["0.9740288145785059", "0.9224559600889171"], ["0.9873416923734943", "0.9610974921550473"], ["1", "1"]];
  918.             var pairs_b = [["0", "0"], ["0.04382263099593838", "0.0335866406453361"], ["0.08735524151589408", "0.06713929283107775"], ["0.13030781108388437", "0.10062396809763045"], ["0.17239031922392672", "0.1340066779853998"], ["0.21331274546003828", "0.16725343403479132"], ["0.2527850693162364", "0.2003302477862105"], ["0.29051727031653857", "0.23320313078006294"], ["0.32621932798496195", "0.2658380945567542"], ["0.35960122184552384", "0.29820115065668973"], ["0.3903729314222416", "0.33026216363453476"], ["0.418276660736464", "0.3620405640340923"], ["0.4434292235910174", "0.3935901841227579"], ["0.46618911751871367", "0.42496554895740846"], ["0.4869188681145312", "0.4562211835949208"], ["0.5059810009734483", "0.4874116130921718"], ["0.5237380416904436", "0.5185913625060383"], ["0.5405525158604948", "0.549814956893397"], ["0.5567869490785807", "0.5811369213111252"], ["0.5728038669396799", "0.6126110395508719"], ["0.5889657950387701", "0.6442622787185796"], ["0.6056325735960525", "0.6760781720262137"], ["0.6230029203450707", "0.7080437509155997"], ["0.6410258131650498", "0.7401440468285623"], ["0.6596287469369944", "0.7723640912069264"], ["0.6787392165419087", "0.8046889154925165"], ["0.698284716860797", "0.8371035511271582"], ["0.7181927427746635", "0.8695930295526753"], ["0.7383907891645128", "0.9021423822108934"], ["0.7588063509113492", "0.934736640543637"], ["0.7793669228961767", "0.967360835992731"], ["0.8", "1"]]
  919.  
  920.             var matrix_r = [];
  921.             var matrix_g = [];
  922.             var matrix_b = [];
  923.             pairs_r.forEach((v, i) => {
  924.                 matrix_r.push(this.conv(params.val, v[0], v[1]));
  925.             });
  926.             pairs_g.forEach((v, i) => {
  927.                 matrix_g.push(this.conv(params.val, v[1], v[0]));
  928.             });
  929.             pairs_b.forEach((v, i) => {
  930.                 matrix_b.push(this.conv(params.val, v[1], v[0]));
  931.             }); */
  932.  
  933.             const Aya = 0 <= params.val ? {
  934.                 r: [{ x: 0, y: 0 }, { x: 77, y: 26 }, { x: 179, y: 204 }, { x: 255, y: 255 }],
  935.                 g: [{ x: 0, y: 0 }, { x: 64, y: 38 }, { x: 191, y: 217 }, { x: 255, y: 255 }],
  936.                 b: [{ x: 0, y: 0 }, { x: 85, y: 102 }, { x: 170, y: 153 }, { x: 255, y: 204 }]
  937.             } : {
  938.                     r: [{ x: 0, y: 0 }, { x: 77, y: 26 }, { x: 179, y: 51 }, { x: 242, y: 255 }],
  939.                     g: [{ x: 0, y: 0 }, { x: 64, y: 102 }, { x: 153, y: 153 }, { x: 255, y: 255 }],
  940.                     b: [{ x: 0, y: 0 }, { x: 77, y: 79 }, { x: 153, y: 153 }, { x: 255, y: 255 }]
  941.                 };
  942.  
  943.             params.val = Math.abs(params.val);
  944.  
  945.             var b = {
  946.                 mh: 70,
  947.                 Aya
  948.             };
  949.             const c = params.val / 100;
  950.             var d = h => {
  951.                 let l = h.x;
  952.                 return { x: l, y: (1 - c) * l + h.y * c };
  953.             };
  954.  
  955.             class nza {
  956.                 constructor(a, b) {
  957.                     this.J3b = a;
  958.                     this.xs = b
  959.                 }
  960.  
  961.                 interpolate(a) {
  962.                     var b = this.J3b;
  963.                     const c = this.xs;
  964.                     let d = 0, e = this.J3b.length - 1;
  965.  
  966.                     for (; 1 < e - d;) {
  967.                         var f = e + d >> 1;
  968.                         b[f].x > a ? e = f : d = f
  969.                     }
  970.                     f = b[e];
  971.                     b = b[d];
  972.                     const g = f.x - b.x, h = (f.x - a) / g;
  973.                     a = (a - b.x) / g;
  974.  
  975.                     return h * b.y + a * f.y + (c[d] * (h ** 3 - h) + c[e] * (a ** 3 - a)) * g ** 2 / 6;
  976.                 }
  977.             }
  978.  
  979.             function Xr(a) {
  980.                 var b = a.length;
  981.  
  982.                 const c = new Float64Array(b),
  983.                     d = new Float64Array(b);
  984.                 for (let e = 1; e < b - 1; e++) {
  985.                     const f = a[e - 1],
  986.                         g = a[e],
  987.                         h = a[e + 1],
  988.                         l = h.x - f.x,
  989.                         p = (g.x - f.x) / l,
  990.                         q = p * d[e - 1] + 2;
  991.                     c[e] = (6 * ((h.y - g.y) / (h.x - g.x) - (g.y - f.y) / (g.x - f.x)) / l - p * c[e - 1]) / q;
  992.                     d[e] = (p - 1) / q
  993.                 }
  994.                 for (b -= 2; 0 <= b; --b) d[b] = d[b] * d[b + 1] + c[b];
  995.  
  996.                 return new nza(a, d);
  997.             };
  998.  
  999.             a = Xr(Aya.r.map(d));
  1000.             const e = Xr(Aya.g.map(d));
  1001.             b = Xr(Aya.b.map(d));
  1002.             d = Array(32);
  1003.             const f = Array(32), g = Array(32);
  1004.             for (let h = 0; 32 > h; h++) {
  1005.                 const l = 255 * h / 31;
  1006.                 d[h] = Math.max(0, Math.min(255, a.interpolate(l))) / 255;
  1007.                 f[h] = Math.max(0, Math.min(255, e.interpolate(l))) / 255;
  1008.                 g[h] = Math.max(0, Math.min(255, b.interpolate(l))) / 255;
  1009.             }
  1010.  
  1011.             return `<feComponentTransfer>
  1012.                     <feFuncR type="table" tableValues="${d.join(" ")}"></feFuncR>
  1013.                     <feFuncG type="table" tableValues="${f.join(" ")}"></feFuncG>
  1014.                     <feFuncB type="table" tableValues="${g.join(" ")}"></feFuncB>
  1015.                 </feComponentTransfer> `
  1016.         },
  1017.  
  1018.         //var ff = filters.getFilters([{name: "viggnete", val: 44, wh: {w: 600, h: 600} } ]);
  1019.         viggnete: function (params) {
  1020.             if (params.val === 0) return;
  1021.  
  1022.             var x = params.wh.w / 2;
  1023.             var y = params.wh.h / 2;
  1024.             var z = this.conv(params.val, (params.wh.w + params.wh.h) * 2, ((params.wh.w + params.wh.h) * 2) * .5);
  1025.  
  1026.             return `
  1027.             <feFlood id="vignette-flood" x="0" y="0" result="blackfield" flood-color="#000000" flood-opacity="1"></feFlood>
  1028.             <feSpecularLighting id="vignette-specular" result="spotlight" lighting-color="#FFFFFF" surfaceScale="1" specularConstant="1" specularExponent="120">
  1029.             <fePointLight id="vignette-pointlight" x="${x}" y="${y}" z="${z}"></fePointLight>
  1030.             </feSpecularLighting>
  1031.             <feBlend id="vignette-mask" result="mask" in="blackfield" in2="spotlight" mode="lighten"></feBlend>
  1032.             <feBlend id="vignette-mask-multiply" in="mask" in2="SourceGraphic" mode="multiply" result="vignette-result"></feBlend>
  1033.         `;
  1034.         },
  1035.  
  1036.         epic: function (params = {}) {
  1037.             // console.log(params);
  1038.             return '';
  1039.         },
  1040.         conv(val, slope_min = 0, slope_max = 1) {
  1041.             var val = val / 100;
  1042.             var r = ((slope_max * (val)) - (slope_min * (val)) - (slope_min * -1)).toFixed(8);
  1043.             return r;
  1044.         },
  1045.  
  1046.         convertValue(originalMaxValue, rangeValue) {
  1047.             return originalMaxValue * (Number(rangeValue) / 100);
  1048.         },
  1049.  
  1050.         generateFilter(filterName, rangeValue, { width, height }) {
  1051.             const filter = filtersArray.find(({ name }) => name == filterName);
  1052.             if (!filter) return;
  1053.  
  1054.             const cloneParams = [];
  1055.             filter.params.forEach(param => {
  1056.                 cloneParams.push({
  1057.                     ...param, val: filters.convertValue(param.val, rangeValue),
  1058.                     wh: { w: width, h: height }
  1059.                 });
  1060.             });
  1061.  
  1062.             console.log(filter.name);
  1063.             return filters.getFilters(cloneParams);
  1064.         },
  1065.  
  1066.         // for test
  1067.         getFiltersString(id, value, params = {}) {
  1068.             return filters.generateFilter(filtersArray[id].name, value, params);
  1069.         }
  1070.     }
  1071.  
  1072.  
  1073.     const filterElement = document.getElementById('filter');
  1074.  
  1075.     // filterElement.innerHTML = filters.generateFilter('default');
  1076.  
  1077.     /* var ff = filters.getFilters([
  1078.         //  {name: "viggnete", val: 44, wh: {w: 600, h: 600} },
  1079.         { name: "blur", val: 22, wh: { w: 600, h: 600 } },
  1080.         { name: "crossProcess", val: 1, wh: { w: 600, h: 600 } },
  1081.         //  {name: "contrast", val: 11, wh: {w: 600, h: 600} },
  1082.     ]); */
  1083.  
  1084.     // document.getElementById("filter1").innerHTML = ff.join("");
  1085.  
  1086.     /* const selectFilter = document.getElementById('selectFilter');
  1087.  
  1088.     selectFilter.innerHTML = '';
  1089.  
  1090.     for(const filter of filtersArray) {
  1091.         selectFilter.innerHTML += `<option value="${filter.name}">${filter.name}</option>`;
  1092.     }     */
  1093.  
  1094.     /* let html = '';
  1095.     for (const filter of filtersArray) {
  1096.         html += `<filter id="${filter.name}" color-interpolation-filters="sRGB">
  1097.             ${filters.getFilters(filter.params).join('')}
  1098.         </filter>`;
  1099.     }
  1100.  
  1101.     document.getElementById('canvasFilters').innerHTML = html; */
  1102.  
  1103.     /* brightness: 12,
  1104.     contrast: -40,
  1105.     saturation: -28,
  1106.     hue: 0,
  1107.     blur: 0,
  1108.     crossProcess: 100,
  1109.     vignette: 0 */
  1110.  
  1111. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!