glfx.js js图片滤镜插件-BFW插件库

glfx.js js图片滤镜插件

glfx.js js图片滤镜插件,它使用WebGL来创建精彩的图像效果。WebGL是一种可以在网页浏览器中呈现3D画面的新技术，只有新的浏览器版本才支持这项技术，Glfx.js包含了很多功能，如亮度/对比度、棕褐色效果、噪点、色调、模糊滤镜等等

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
        use(["glfx"], function() {
        var image = new Image();
        image.crossOrigin = '';
        image.onload = function() {
        init(image);
        };
        image.src = '//repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png';
        });
        });
        function init(image) {
        var placeholder = document.getElementById('placeholder');
        
        // Try to get a WebGL canvas
        try {
        var canvas = fx.canvas();
        } catch (e) {
        placeholder.innerHTML = e;
        return;
        }
        
        // Create a texture from the image and draw it to the canvas
        var texture = canvas.texture(image);
        canvas.draw(texture).update().replace(placeholder);
        
        // Draw a swirl under the mouse
        $(document).mousemove(function(e) {
        var offset = $(canvas).offset();
        var x = e.pageX - offset.left;
        var y = e.pageY - offset.top;
        canvas.draw(texture).swirl(x, y, 200, 4).update();
        });
        }
    </script>
</head>

<body>

    <span id="placeholder">Loading...</span>

</body>

</html>

更多请看官网 http://evanw.github.io/glfx.js/demo/