Stop/play parsed aPNG

[lxchjxzotbgvutazco]

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?

[davidmz]

The parseURL function is from another library, https://github.com/davidmz/apng-canvas. This code should work:

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

[lxchjxzotbgvutazco]

@davidmz, ahh, sorry for that, I mixed repositories! Anyway I tried to do it this way, but it seems that nothing affects PNGs I have on my website. I tried with multiple methods, multiple images, basically nothing works.

Is there any way to pause/play animated PNG with your library?

[davidmz]

Could you show some test code on the codepen or other code-sharing service?

[lxchjxzotbgvutazco]

Sure, here's very simple example: https://codepen.io/hamcsmtotpomntqcoa/pen/ExyJLoQ?editors=1011

But I think you won't be able to test it there since codepen block CORS and prevent image download by APNG :(

In general, I need to trigger PNG to play again if it's in the screen view. I'm using Intersection Observer, but I'm not able to trigger PNG to run again if loop is not infinite. Also I can't stop infiinite loop..

[davidmz]

You cannot control PNG itself, as an IMG tag. The apng-canvas is designed for playing APNG on canvas. So you should create a canvas element, attach player to its context (see addContext method), and only after that you will be able to play/pause animation on canvas.

[lxchjxzotbgvutazco]

@davidmz, huge thanks for your answer, but I'm not sure if I follow. Should I create canvas via APNG.animateImage(img HTMLImageElement) and then use APNG.parseBuffer(data ArrayBuffer) to add context and then be able to rewind/play animation?

Or should I use only parseButffer method and prepare binary data from each image (getBase64Image?)?

[davidmz]

I would like to understand what exactly you want to achieve. Do you want to put an IMG tag on a page so that APNG will work in any browser? Or do you want to control the playback of a specific APNG?

[lxchjxzotbgvutazco]

I have to control the playback of multiple animated PNGs. So user adds component with list of PNGs and they run only once each time user scrolls to them. Meaning that intersection observer has to trigger play method for those images if any of them is in screen view.

[davidmz]

Well, in this case, you should parse all of the user-added APNG URLs using the APNG.parseURL (this will get you the APNG objects). Then you should create canvas elements with the sizes of APNGs, attach canvas' contexts to APNGs using .addContext(), and then use play/rewind method of apng objects.

[lxchjxzotbgvutazco]

@davidmz, I tried it this way, but it doesn't work:

APNG.parseURL(this.ui.$image.attr('src')).then((png) => {
        const canvas = document.createElement('canvas');

        canvas.width = png.width;
        canvas.height = png.height;
        png.addContext(canvas.getContext('2d'));

        setInterval(() => {
            png.rewind();
        }, 3000);
});

I get proper object from parseURL method, Canvas is created correctly, then I get 2D context, but after addContext method I can't affect image with play/rewind. Nothing works even though I have no errors :(

[davidmz]

This code works: https://codesandbox.io/s/apng-sromh?file=/src/index.js

[lxchjxzotbgvutazco]

@davidmz, thank you! I really appreciate the time you spent to help me. Everything works perfectly now, once again huge thanks, and have a nice evening!