vintageJS 技术文档

1. 安装指南

要安装 vintageJS，您可以使用 npm 包管理器。以下是安装步骤：

$ npm install vintagejs

安装完成后，您可以在项目中引入 vintageJS 并开始使用。

2. 项目的使用说明

vintageJS 是一个用于为图像添加复古/怀旧效果的 JavaScript 库。它基于 HTML5 的 canvas 元素，提供了简单易用的 API 来处理图像效果。

基本用法

vintagejs 函数接受两个参数：源图像（可以是 URL、ImageElement 或 CanvasElement）和效果选项对象。函数返回一个 Promise，该 Promise 解析为一个结果对象。

vintagejs('./path/to/picture.jpg', { brightness: 0.2 })
  .then(res => res.genImage())
  .then(img => document.body.appendChild(img));

结果对象方法

结果对象提供了以下方法来访问修改后的图像数据：

• getDataURL(mimeType?: string, quality?: number): string
  返回更新后的图像的数据 URL。可以使用它来更新现有图像的源。

• getCanvas(): HTMLCanvasElement
  返回包含更新后图像的 canvas 元素。可以使用它将更改绘制到另一个 canvas 上。

• genImage(mimeType?: string, quality?: number): Promise<HTMLImageElement>
  返回一个 Promise，该 Promise 解析为更新后的图像的 HTMLImageElement。

如果没有提供 mimeType，默认值为 image/jpeg，quality 默认值为 1。

更多示例

// 使用图像作为源并使用数据 URL 更新图像
const srcEl = document.querySelector('img.myImage');
vintagejs(srcEl, { brightness: 0.2 })
  .then(res => {
    srcEl.src = res.getDataURL();
  });

// 使用 canvas 作为源并将结果绘制到 canvas 上
const srcEl = document.querySelector('canvas.myCanvas');
const ctx = srcEl.getContext('2d');
vintagejs(srcEl, { brightness: 0.2 })
  .then(res => {
    ctx.drawImage(res.getCanvas(), 0, 0, srcEl.width, srcEl.height);
  });

3. 项目API使用文档

效果选项

vintageJS 提供了多种效果选项，您可以根据需要自定义图像效果。以下是效果选项的详细说明：

type TEffect = {
  curves: false | TCurve,     // 默认值: false
  screen: false | TRGBAColor, // 默认值: false
  saturation: number,         // 浮点数，范围在 0 到 1 之间，默认值: 1
  vignette: number,           // 浮点数，范围在 0 到 1 之间，默认值: 0
  lighten: number,            // 浮点数，范围在 0 到 1 之间，默认值: 0
  viewfinder: false | string, // 字符串必须是 URL，默认值: false
  sepia: boolean,             // 默认值: false
  gray: boolean,              // 默认值: false
  brightness: number,         // 浮点数，范围在 -1 到 1 之间，默认值: 0
  contrast: number,           // 浮点数，范围在 -1 到 1 之间，默认值: 0
};

type TCurve = {
  r: Array<Uint8> | Uint8ClampedArray, // 数组中的整数范围在 0 到 255 之间，数组长度必须为 256
  g: Array<Uint8> | Uint8ClampedArray, // 数组中的整数范围在 0 到 255 之间，数组长度必须为 256
  b: Array<Uint8> | Uint8ClampedArray, // 数组中的整数范围在 0 到 255 之间，数组长度必须为 256
};

type TRGBAColor = {
  r: Uint8,  // 整数范围在 0 到 255 之间
  g: Uint8,  // 整数范围在 0 到 255 之间
  b: Uint8,  // 整数范围在 0 到 255 之间
  a: number, // 浮点数，范围在 0 到 1 之间
};

示例

const noEffect = {};

const effect_1 = {
  brightness: -0.2,
  contrast: 0.15,
};

const effect_2 = {
  brightness: 0.1,
  vignette: 0.3,
  viewfinder: './film-1.jpg',
  screen: {
    r: 227,
    g: 12,
    b: 169,
    a: 0.15,
  },
};

4. 项目安装方式

vintageJS 可以通过 npm 安装，安装命令如下：

$ npm install vintagejs

安装完成后，您可以在项目中引入 vintageJS 并开始使用。