apng-canvas v2.1.0 技术文档

1. 安装指南

环境要求

apng-canvas 库依赖于以下技术：

• Canvas
• Typed Arrays
• Blob URLs
• requestAnimationFrame

这些技术在所有现代浏览器和IE 10及以上版本中都得到了支持。

安装步骤

1. 克隆项目仓库到本地：

   git clone https://github.com/davidmz/apng-canvas.git
   

2. 进入项目目录：

   cd apng-canvas
   

3. 安装依赖：

   npm install
   

4. 构建项目：

   gulp build
   

2. 项目的使用说明

基本用法

apng-canvas 库用于在浏览器中使用 canvas 显示动画PNG（APNG）。以下是一个基本的使用示例：

APNG.ifNeeded().then(function() {
    var images = document.querySelectorAll(".apng-image");
    for (var i = 0; i < images.length; i++) APNG.animateImage(images[i]);
});

注意事项

• 图像通过 XMLHttpRequest 加载，因此HTML页面和APNG图像必须位于同一域名下，或者提供正确的 CORS 头（例如，Access-Control-Allow-Origin: *）。
• 该库在本地机器上（使用 file:// 协议）无法工作。
• 压缩代理（如Opera的涡轮模式、移动Chrome的“减少数据使用”模式等）不支持APNG格式，可能会将APNG转换为静态图像。为防止这种情况，图像需要通过 Cache-Control: no-transform HTTP头提供，或者通过HTTPS提供。

3. 项目API使用文档

全局对象 APNG

apng-canvas 库创建了一个全局对象 APNG，该对象包含多个方法。

高级别方法

• APNG.ifNeeded(ignoreNativeAPNG: boolean)

  • 如果浏览器不支持原生APNG，则加载库。返回一个Promise对象。

• APNG.animateImage(img: HTMLImageElement)

  • 将指定的图像元素动画化。返回一个Promise对象。

• APNG.releaseCanvas(canvas: HTMLCanvasElement)

  • 释放指定的 canvas 元素，停止动画。

低级别方法

• APNG.checkNativeFeatures()

  • 检查浏览器是否支持原生APNG。返回一个Promise对象。

• APNG.parseBuffer(data: ArrayBuffer)

  • 解析APNG数据的缓冲区。返回一个Promise对象。

• APNG.parseURL(url: string)

  • 解析APNG数据的URL。返回一个Promise对象。

• APNG.animateContext(url: string, context: CanvasRenderingContext2D)

  • 在指定的 canvas 上下文中动画化APNG。返回一个Promise对象。

异步操作

大多数方法都是异步的，并返回ES6的 Promise 对象。大多数现代浏览器都内置支持 Promise，对于不支持的浏览器，库使用了 polifill。

4. 项目安装方式

通过NPM安装

你可以通过NPM安装 apng-canvas：

npm install apng-canvas

手动下载

你也可以直接从GitHub仓库下载最新版本的 apng-canvas：

git clone https://github.com/davidmz/apng-canvas.git

构建项目

下载后，进入项目目录并运行以下命令来构建项目：

npm install
gulp build

通过以上步骤，你就可以成功安装并使用 apng-canvas 库来在浏览器中显示动画PNG图像。