npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@zhinan-oppo/canvas-player

v3.27.0

Published

Play image sequences with Canvas.

Downloads

5

Readme

scroll-handle

Install

使用 yarn 安装

yarn add @zhinan-oppo/canvas-player
import { CanvasPlayer } from '@zhinan-oppo/canvas-player';

Usage

CanvasPlayer

constructor(canvas, imageURLs, options?: CanvasPlayerOptions)

  • canvas: HTMLCanvasElement,用于绘制图片的 canvas
  • imageURLs: string[] 一组图片序列的 URL
  • options: 非必需
    • fitImageSize: boolean,默认true
      • 是否将 canvas 的widthheight设置成第一张加载完成的图片的widthheight
    • 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: 顺序播放序列帧到结尾后逆序播放,循环往复
    • waitingOnLoading: boolean,是否等待图片加载,默认true
      • true: 等待直到要绘制的图片加载完成
      • false: 不等待图片加载,下一帧图片可绘制时直接跳过正在加载的图片
    • onUpdated: (i: number) => void,图片绘制完成后的回调,参数i为所绘制的图片在imageURLs中的索引
    • onEnded: (i: number) => void,播放结束的回调
      • modePlayMode.Normal时,i === -1
      • modePlayMode.Reverse时,i === imageURLs.length
      • modePlayMode.LoopPlayMode.Alternate时,onEnded不会被触发

pause(): void

  • 暂停

playing: boolean

  • 是否在播放

Example

import { CanvasPlayer, PlayMode } from '@zhinan-oppo/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>