WebGL Filter 技术文档

1. 安装指南

环境要求

• 最新版本的浏览器（支持 WebGL）
• Python 2.7（用于启动本地服务器）

安装步骤

1. 克隆项目到本地：

   git clone https://github.com/evanw/webgl-filter.git
   

2. 进入项目文件夹，并启动本地服务器：

   cd webgl-filter/www
   python -m SimpleHTTPServer
   

3. 在浏览器中访问 http://localhost:8000，即可查看项目。

2. 项目的使用说明

WebGL Filter 是一个基于 WebGL 的图像编辑器，它允许用户使用各种图像滤镜（对比度调整、倾斜移位、镜头散焦等）对图片进行变换。WebGL 是一种网页 GPU 编程技术，使得 JavaScript 网页应用能够达到前所未有的性能。

使用步骤

1. 打开网页 http://localhost:8000。
2. 拖拽或选择图片上传到编辑器。
3. 应用不同的图像滤镜进行编辑。
4. 完成编辑后，可以保存或分享您的作品。

3. 项目API使用文档

本项目核心功能被迁移到了 glfx.js 库中，以下是一些基本的使用方法：

加载图像

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('webgl');
var img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
  // 在这里使用图像
};

应用滤镜

glfx.filter(ctx, img, 'brightness', 1.5); // 调整亮度
glfx.filter(ctx, img, 'contrast', 1.2); // 调整对比度
// 更多滤镜效果请参考 [glfx.js 文档](https://github.com/evanw/glfx.js)

保存图像

var dataURL = canvas.toDataURL('image/png');
// 使用 dataURL 进行保存或分享

4. 项目安装方式

本项目可以通过以下方式安装：

• 克隆项目

  git clone https://github.com/evanw/webgl-filter.git
  

• 下载 ZIP 文件

  从 GitHub 仓库 下载 ZIP 文件，解压后使用。

• NPM 安装

  如果您希望在项目中使用 glfx.js 库，可以通过 NPM 进行安装：

  npm install glfx.js