davidmz / apng-js Goto Github PK

Please release apng-js 1.1.1 to npm. Thank you.

I want the ability to play/pause the APNG on a webpage. I am having trouble understanding from the instructions on the readme exactly how you get an APNG on the webpage and use this library to control it.

I saw the demo and see that it does this, but the index.js doesnt look like your documentation.

Hey, after running the below code I'm able to see the image details, but could you tell me how can I stop or play again some animation? I can see the play method, but I'm unable to do trigger it:

APNG.parseURL(src).then(function(data) {
  console.log(data);
});

Should I somehow assign it to a variable like const player = APNG.parseURL(src); and then use it by player.play(); if needed or how it works?

IE11 throwing error on Uint8Array.some
fast fix [].some.call(PNGSignature ....

Awesome project, thanks!

Some of my animations actually have a "freeze frame" which isn't 0, so something like seek(46) would be very helpful.

Right now I may createImage for that frame and draw it myself on the context, it's dirty. WDYT?

Hello David,

apng-js is a great tool for manipulating apng files, thank you for this!

The code has not been updated for 4 years now.
Some forks contain interesting updates or additions (https://github.com/WiseLee0/apng-js-mini) and there are some features that I am about to add too (reverse play using negative values of playbackRate).

I don't know what your current situation is but would you agree to give some help by merging interesting forks, including the one I am working on? I think it is always better to contribute to the original project.

Best regards,
Anthony

Hi,
I'm having a weird issue.
When I call my apng with an img tag it looks fine.
When I display it after parsing with the parseAPNG() function it seems like that all the pixels that aren't changing from frame to frame became transparent and discarded (images cropped).
Is there a way to avoid this?
Thanks :)

I notice that your classes of APNG, Frame not exported as module, how should I use the frames (i.e. a sequence of images) composing feature?

Hi there! Thanks so much for making this library!

I'm looking for a drop-dead simple way to use this library, but it appears to be wrapped in Webpack and importing multiple files.

Do you have a completely compiled file, (maybe even minified) that I can pop into my site and it will just target the png on the page.

I'm trying to pause a png after 5 seconds and/or click.

Any help would be great. I've read your docs about vanilla implementation, but the file just won't play nice since they require imports.

I want to help provide type support for this repo. May I write a .d.ts for this or help to change the whole project from JavaScript to TypeScript?

The player currently doesn't scale the content of the canvas to the width & height of the canvas. This is relevant if i.e. the content of the buffers is larger than the canvas it's supposed to be rendered on.
Can this be added, so that the canvas scales its content?

Now, canvas can only show the original size of APNG. I want to control dynamically the size of the animated image in html or js. How should i do ?

like this

Hi,
I'm trying to use the parseAPNG() function in node.js but keep receiving the 'Not a PNG' error.
I'm reading the .apng file to a 'Buffer', then converting it to an 'ArrayBuffer' before sending to parseAPNG().
Am I doing something wrong?
Thanks !

Hi @davidmz,

really nice work you did with this library! Many thanks so far, it works great.

One question though, is it possible to place the animation somewhere else on the canvas instead of 0:0? I'm not a canvas-expert and it your library doesn't provide something like this, or?

Many thanks in advance and cheers, Christian

Could webp-js exist?

I'm using NodeJS and just want to read in a bunch of png files and output them to apng, i'm not interested in anything browser related nor am I interested in reading in an existing apng file. I thought your program could do this but maybe i'm wrong, Is your program just for managing existing apng files?

I have to say this is such an amazing little project you have here! I'm very new to all of this and this was really helpful. On that I have a suggestion: what about being able to modify the field values like the duration, the size, etc, so you can export a new APNG? Have you ever considered trying to do that?

Additionally, would you add a way to export the frames individually?

async createApngPlayer(url, ctx, options = {}) {
const imgBuffer = await this.getImgBuffer(url);
const apng = parseAPNG(imgBuffer);
Object.keys(options).forEach(key => {
apng[key] = options[key];
});
// apng.createImages().then(()=>{
// console.log();
// }).catch((err) => {
// console.log(err,'播放err');
// });
apng.getPlayer(ctx).then(player1=>{
console.log(player1, '播放');
player1.play();
}).catch(err => {
console.log(err, '播放');
});
// const player = await apng.getPlayer(ctx);
console.log(player, '播放');
return player;
}

i can log apng but this code cannot return player with err 'Image creation error'.

if createImages first ,err in getPlayer will be 'Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'
and err in createImanges 'Image creation error'.

As shown in the figure, my APNG size was truncated incorrectly, which resulted in a strange display when my project was used. It is speculated that there was some problem with the calculation of high truncation, but I did not see it, so I came to seek your help

//solved

The file parser.d.ts has a syntax error

import { APNG, Frame } from './structs';
export declare function isNotPNG(err: unknown): boolean;
export declare function isNotAPNG(err: unknown): boolean;
/**
 * Parse APNG data
 *
 */
export default function parseAPNG(buffer: ArrayBuffer): Error | APNG;

// export type APNG,   << HERE
// export type Frame;  << HERE

Commenting out the last two lines allows the project to be compiled.

Extract from my package.json:

 "dependencies": {
    "@angular/animations": "~9.0.0",
    "@angular/cdk": "^10.1.2",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/forms": "~9.0.0",
    "@angular/localize": "^9.0.5",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/router": "~9.0.0",
    "apng-js": "^1.1.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },