高性能 img 标签 RedWebImage

• 授权协议: GPL
• 开发语言: JavaScript
• 操作系统: 跨平台
• 软件首页: https://github.com/redknotmiaoyuqiao/RedWebImage
• 软件文档: https://github.com/redknotmiaoyuqiao/RedWebImage

软件介绍

RedWebImage

Demo 演示

这是一个很有意思的项目，基于 WebGL 的滤镜系统，我们将使用 OpenGL ES 作为硬件加速，做一个高性能的 img 标签。你可以使用这个 img 标签完成非常多，非常炫酷的效果，例如，动态的高斯模糊，漩涡效果等。

我们的小工具

• 使用默认Shader：我们默认写了一些Shader，这些Shader放在了 /shader 文件夹之下。我们在发布的时候，把这些文件的内容写成了 js 的变量，在 /build/red-web-shader-lib.js 里面，其实就是把这些文件的内容用引号阔了起来。你如果想使用，直接在你的 Html 页面里引入这个 js 文件就行了。

• 自定义Shader：如果你觉得我写的 Shader 太差劲，或者你想要什么新的效果，需要自己写 Shader ，那么也很容易。/shader 文件夹之下有两个文件夹 Fragment 和 Vertex 。你直接把你需要的 Shader 写进去就好了，注意，文件不要加后缀，开头也不要以数字什么的开头，因为我们的工具会把你的文件名当成变量名。写好之后，就可以用我们的工具把 Shader 文件变成 js 的变量，写到 /build/red-web-shader-lib.js 里面。

• 我们的工具是这个，/build.jar ，这是一个 Java 写的小工具，所以需要你的电脑安装 jre ，最好是 Java8 ，写好自己的的 Shader 以后，你就可以用这个工具了

java -jar build.jar shader

用这行命令就可以了。这行命令会把原先的 /build/red-web-shader-lib.js 删除掉，然后根据 /shader 下的内容，重新生成一个。

• 使用的时候，要引入 /build 下面的两个 js 文件，我们的小工具除了把 Shader 文件写入 /build/red-web-shader-lib.js 中之外，还有一个功能是把我们的源文件写入 /build/red-web-image.js 里面。我们的项目源码在 /lib 文件夹之下，如果你改变了我们的项目源码，那么你可能需要下面这个命令。

java -jar build.jar all

本文地址：https://codercto.com/soft/d/6802.html