webpack.config.js 配置文件我已修改,打成的包在 lib 中,可以通过 script 标签直接使用
1、执行安装依赖包命令 yarn 2、执行打包命令: yarn prepublish 3、将生成的 apngjs.js 中 exports.default = parseAPNG 改成 exports.parseAPNG = parseAPNG 即可
webpack libraryTarget 代码结构 https://www.jianshu.com/p/d22f678af5b7
apng-js
provides functions for parse and render animated PNG's
(APNG).
https://davidmz.github.io/apng-js/
npm install apng-js
Default exported function. Parses APNG data, returns APNG object (see below) or Error. This function can be used in node.js environment. Object methods relies on browser features (canvas, requestAnimationFrame…) and should work only in browser.
Usage:
import parseAPNG from 'apng-js';
const apng = parseAPNG(buffer);
if (apng instanceof Error) {
// handle error
}
// work with apng object
Checks if Error is 'Not a PNG' error.
Checks if Error is 'Not an animated PNG' error.
Structure of APNG file.
class APNG {
width: number // with of canvas, pixels
height: number // height of canvas, pixels
numPlays: number // number of times to loop animation (0 = infinite looping)
playTime: number // total duration of one loop in milliseconds
frames: Frame[] // array of frames
// Methods
createImages(): Promise // create imageElement's for all frames
getPlayer(context: CanvasRenderingContext2D, autoPlay: boolean = false): Promise.<Player>
// Create Player (see below) on given context and start playing
// if autoPlay is true.
}
Individual APNG frame.
class Frame {
left: number // left offset of frame, pixels
top: number // top offset of frame, pixels
width: number // with of frame, pixels
height: number // height of frame, pixels
delay: number // time to show frame in milliseconds
disposeOp: number // type of dispose operation (see APNG spec.)
blendOp: number // type of blend operation (see APNG spec.)
imageData: Blob // image data in PNG (not animated) format
imageElement: HTMLImageElement // image data rendered as HTML Image element.
// This field is null right after 'parse',
// use Frame.createImage() or APNG.createImages()
// to fill this field.
// Methods
createImage(): Promise // create imageElement for this frame
}
Player renders APNG frames on given rendering context and plays APNG animation.
class Player {
context: CanvasRenderingContext2D
playbackRate: number = 1.0 // animation playback rate
currFrameNumber: number // current frame number (read only)
currFrame: Frame // current frame (read only)
paused: boolean // playback is paused (read only)
ended: boolean // playback is ended (read only)
// Methods
play() // start or resume playback
pause() // pause playback
stop() // stop playback and rewind to start
renderNextFrame() // move to next frame and render it on context
// Use this method to manual, frame by frame, rendering.
}
Player object is an EventEmitter. You can listen to following events:
- play — playback started;
- frame — frame played (frame number passed as event parameter);
- pause — playback paused;
- stop — playback stopped;
- end — playback ended (for APNG with finite count of plays).