README
Install
使用 tnpm 安装
npm install cool-canvas-player
Vanilla JS Usage
import { CanvasPlayer } from 'cool-canvas-player';
CanvasPlayer
constructor(canvas, imageURLs, options?: CanvasPlayerOptions)
canvas
:HTMLCanvasElement
,用于绘制图片的 canvasimageURLs
:string[]
一组图片序列的 URLoptions
: 非必需fitImageSize
:boolean
,默认true
- 是否将 canvas 的
width
和height
设置成第一张加载完成的图片的width
和height
- 是否将 canvas 的
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
,每秒播放图片的张数,默认值 24mode
: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
- 暂停
: playingboolean
- 是否在播放
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}
/>