Install

使用 tnpm 安装

npm install cool-canvas-player

Vanilla JS Usage

import { CanvasPlayer } from 'cool-canvas-player';

CanvasPlayer

constructor(canvas, imageURLs, options?: CanvasPlayerOptions)

• canvas: HTMLCanvasElement，用于绘制图片的 canvas
• imageURLs: string[] 一组图片序列的 URL
• options: 非必需
  • fitImageSize: boolean，默认true
    • 是否将 canvas 的width和height设置成第一张加载完成的图片的width和height
  • posterFrame: false|'first'|'last'|number，默认'first'
    • 'first'|'last': 默认显示第一张/最后一张图片
    • number: 默认显示imageURLs中对应的图片

load(): Promise<HTMLImageElement[]>

• 加载所有图片

seek(i, options): Promise<void>

• i: 0 <= i < imageURLs.length
• options: 非必需
  • draw: 是否将当前指定的图片绘制到 canvas 中，默认true

seekPercent(p, options): Promise<void>

• 相当于seek(Math.round(p * (imageURLs.length - 1)), options)

play(options): Promise<void>

• 播放序列帧

• options:

  • fps: number，每秒播放图片的张数，默认值 24
  • mode: enum PlayMode，默认值Normal
    • Normal: 顺序播放序列帧到结尾并停止
    • Reverse: 逆序播放序列帧到开头并停止
    • Loop: 顺序播放序列帧到结尾后从头开始
    • Alternate: 顺序播放序列帧到结尾后逆序播放，循环往复
    • Live: 实时流一直播放下去
  • waitingOnLoading: boolean，是否等待图片加载，默认true
    • true: 等待直到要绘制的图片加载完成
    • false: 不等待图片加载，下一帧图片可绘制时直接跳过正在加载的图片
  • onUpdated: (i: number) => void，图片绘制完成后的回调，参数i为所绘制的图片在imageURLs中的索引
  • onEnded: (i: number) => void，播放结束的回调
    • 当mode为PlayMode.Normal时，i === -1
    • 当mode为PlayMode.Reverse时，i === imageURLs.length
    • 当mode为PlayMode.Loop或PlayMode.Alternate时，onEnded不会被触发

pause(): void

• 暂停

playing: boolean

• 是否在播放

Example

import { CanvasPlayer, PlayMode } from '@alife/canvas-player';

const canvas = document.getElementById('canvas');
const urls = ['https://example.com/0.png', 'https://example.com/1.png'];
const player = new CanvasPlayer(canvas, urls);
player.play({
  mode: PlayMode.Alternate,
  onUpdated: i => {
    console.log(i);
  },
});

<div>
  <canvas id="canvas" />
</div>

React Usage

目前暴露的React组件有两个：PlayerWithUrls & PlayerWithOneUrl。

PlayerWithUrls

这个组件主要用在已知多张图片地址，顺序加载的情况下。默认循环（Loop）播放。

Example

import { PlayerWithUrls, PlayMode } from 'cool-canvas-player';

<PlayerWithUrls 
  url={["https://example.com/example1.jpg", "https://example.com/example2.jpg", "https://example.com/example3.jpg"]}
  options={{ fitImageSize: false }}
  playOptions={{ mode: PlayMode.Loop, fps: 24 }}
  width={800}
  height={450}
/>

PlayerWithOneUrl

这个组件主要用在从固定设备如摄像机请求图片。请求地址单一，每次返回不同结果，实时（Live)展示。

Example

import { PlayerWithOneUrl, PlayMode } from 'cool-canvas-player';

<PlayerWithOneUrl 
  url="https://example.com/example.jpg"
  options={{ fitImageSize: false }}
  playOptions={{ mode: PlayMode.Live, fps: 15 }}
  width={800}
  height={450}
/>