开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
RedWebImage首页、文档和下载 - 高性能 img 标签 - 开源中国社区
全部项目分类
我要评价
GPL
JavaScript
跨平台
Redknot
分享
收藏
5 人收藏
收录时间:2017-04-21
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

大家对 RedWebImage 的评论 (全部 0 条评论)
{{repayCom.userName}}
顶部