介绍几个前端使用的滤镜库

八月是一个神奇的月份，我应该安分写点服务端的事情，不料需要写个前端的页面，需要用到js对图片进行滤镜处理。不得不说js很强。我大致说一下怎么处理，将图片转换成canvas,并且同时得到图片的数据，滤镜就是对图片的数据进行处理，然后再将处理好的数据在装换成canvas，根据需要再将canvas转换成图片('.png','.jpg')格式之类的。

所以说图片压缩也就是这样来的，将图片的转为canvas,drawImage这个方法很灵活，可以裁剪之类的，所以也就能发图片缩放了，在转为base64，传到服务器上，得到图片。但是的说一下，应该传过去的图片带有 'data:image/jpeg;base64,'之类的信息，所以后台需要将str_replace('data:image/jpeg;base64,', '', $base64);处理一下，再将base64数据base64_decode处理一下写进文件就可以了

好像有点跑题，多说了几句。略略略............

------------------------------------------------------开始正题--------------------------------------------------------------

•   glfx.js。给出官方的demo，自己慢慢欣赏  https://evanw.github.io/glfx.js/demo/。这个确实不错，我用的本来就是这个，但是后面遇到了一些问题，不得不改变策略。后面会说。抄袭一下他的代码

1. window.onload = function() {
       // try to create a WebGL canvas (will fail if WebGL isn't supported)
       try {
           var canvas = fx.canvas();
       } catch (e) {
           alert(e);
           return;
       }
       // convert the image to a texture
       var image = document.getElementById('image');
       var texture = canvas.texture(image);
       // apply the ink filter
       canvas.draw(texture).ink(0.25).update();
       // replace the image with the canvas
       image.parentNode.insertBefore(canvas, image);
       image.parentNode.removeChild(image);
       // Note: instead of swapping the <canvas> tag with the <img> tag
       // as done above, we could have just transferred the contents of
       // the image directly:
       //
       //     image.src = canvas.toDataURL('image/png');
       //
       // This has two disadvantages. First, it is much slower, so it
       // would be a bad idea to do this repeatedly. If you are going
       // to be repeatedly updating a filter it's much better to use
       // the <canvas> tag directly. Second, this requires that the
       // image is hosted on the same domain as the script because
       // JavaScript has direct access to the image contents. When the
       // two tags were swapped using the previous method, JavaScript
       // actually doesn't have access to the image contents and this
       // does not violate the same origin policy.
   };
   </script>
   <img id="image" src="image.jpg">

   这是文档里的demo,很简单就可以实现墨水的效果，想要更多的效果就看看文档就会有不一样滤镜啦。

    是不是很强？但是你会遇到一个问题就是canvas 转换成 img的时候，你用demo里说的写image.src = canvas.toDataURL('image/png');这个时候会发现根本没有转换，要是看到这里的话，很幸运这个坑我帮你踩了。正确的写法是：image.src = canvas.update().toDataURL('image/png');

        另外说说用这个插件不好的地方吧。其实我之前做的是移动端，所以各种问题，这个也就说移动端的问题。我的安卓手机比较垃圾，所以拍照选取的图片就没法显示出来，黑不溜秋的，尝试用压缩之类的也没有解决。但是手机比较强大的自然也就没问题了。IOS的情况也不容乐观有的可以有的不行。所以很糟糕。另外需要提醒一点的，就是这种图片加载的很多都是异步的。什么意思的呢，就是加载图片还在进行中，你就对加载完成的图片进行处理，自然没有结果的。所以说手机拍照的图片又几M,是不是加载的问题导致没法显示呢。我觉得可能，但不完全是。具体原因还要真的去摸索一下是什么原因。图片太大，加载速度比执行速度慢？还是手机不支持？还是其他原因。要是真研究出来原因了可以告诉我。

• lena.js。传送地址：https://fellipe.com/demos/lena-js/。这个我也没有研究，想要的试探一下就自己研究一下吧

• 用原生js实现的六种滤镜。传送地址：https://www.jb51.net/article/39210.htm。用它的例子的话，你会发现他的滤镜效果是叠加的。不要叠加怎么办，也很简单，就是吧原始的数据记录下来，每次切换滤镜的时候先换成原始的图片就可以了

  以上就是我要介绍的

  本人水平有限，不足之处还望海涵