2

I know how to save a GIF, it's super easy. Just right click and save. Voila! But with these new animated PNG's, I haven't the foggiest. Without using some sort of screen scrape where I'm grabbing the whole desktop, I am not even sure it's possible. Just right clicking and saving results in a single PNG that looks like it's just one frame. Maybe I am not using the right software to view an animated PNG??? I have also tried all the "grabber" programs I can think of (Internet Download Manager, Video DownloadHelper, VSO Downloader, etc) and none of them have detected it.

6
  • I am beginning to think this is not a single image file at all, but that the website actually plays a little "video" of a bunch of PNGs. This is a fucking weird way to do things imo. – Braden Dodge Nov 17 '17 at 6:57
  • 2
    It really depends on the context and what you're actually seeing. Indeed there is a APNG format. – Seth Nov 17 '17 at 7:10
  • 1
    A true animated PNG should be the same as a GIF, it does indeed sound like the site is using JavaScript to "play" a bunch of images. – Mokubai Nov 17 '17 at 7:29
  • You could show us the site and we could see? – jdwolf Nov 17 '17 at 7:32
  • Ok I think I might have something....what sort of program can properly open a apng file? I'm guessing that Windows Photo Gallery can't open it and is opening it as a PNG. I saved it as .apng and now I don't have a program that can open it by default. – Braden Dodge Nov 18 '17 at 1:52
4

It's a Japanese art site, kind of like deviantart, that a friend of mine publishes on, called pixiv. Here's an example: https://www.pixiv.net/member_illust.php?mode=medium&illust_id=65229638Braden's PC's

These animations on Pixiv are indeed composed from individual images and animated using JavaScript. (GIF is bad at reproducing colors, APNG is poorly supported both inside browsers and outside, Flash is dying, so the only good alternative would have been a <video> tag.)

But there are many third-party tools for automatically generating a GIF or WebM file straight out of the site, just search "pixiv ugoira converter" for currently available ones. (The current top result is http://ugoira.dataprocessingclub.org/.)

You can also directly obtain a .zip archive of all frames along with a list of timings:

  • Using the browser's F12 Developer Console, access pixiv.context.ugokuIllustData or pixiv.context.ugokuIllustFullscreenData:

    (As a shortcut, location = pixiv.context.ugokuIllustData.src opens the file directly.)

  • Using a Python or Node module for the (semi-official) Pixiv API:

    $ python3
    >>> import pixivpy3, pprint
    >>> api = pixivpy3.PixivAPI()
    >>> api.login(...)
    >>> data = api.works(65229638)
    >>> pprint.pprint(data["response"][0]["metadata"])
    {'frames': [{'delay_msec': 275}, {'delay_msec': 275},
                {'delay_msec': 275}, {'delay_msec': 275},
                ...
                {'delay_msec': 275}, {'delay_msec': 275}],
     'zip_urls': {'ugoira600x600': 'https://i.pximg.net/img-zip-ugoira/img/2017/10/01/23/13/36/65229638_ugoira600x600.zip'}}
    
1
  • Awesome. I knew there was something out there that would do it. Thanks man. – Braden Dodge Dec 12 '17 at 11:13
2

If you can right-click on an image and save it, I would expect it to save as obtained from the website. Since you've ended up saving a single frame, you probably saved a single frame. The website may be using JavaScript to have multiple graphics become visible, one at a time, thereby showing an animation. In that case, right-clicking the location where the images show is likely to result in saving just one image (whichever is current at the time you save).

In Mozilla Firefox, right-click the background of the page. Choose "View Page Info". Then go to the Media tab. If there are multiple graphics files for the different frames, the "Media" tab is likely to show each of the graphics. If so, that will pretty easily confirm the suspicion of JavaScript using multiple files.

2
  • Well the media tab did not show the particular png(s) at all. I tried to find something by right clicking and doing "inspect element" in both FF and Chrome, but I couldn't find anything helpful. A few times I saw the word "canvas" and the downloaded PNG is called canvas.png. Maybe that means something to someone but I don't know much at all about web design. I see that there is usually a link on the page to a webm video on a page called my.mixtape.moe. The website in question is a Japanese art site site similar to deviantart called pixiv. www.pixiv.net – Braden Dodge Nov 18 '17 at 1:43
  • Here's an interesting thing: I went ahead and saved the whole page as an html, I did both "HTML only" and "complete"....the image(s) are not on the saved page. I suspect they are being "streamed" or something from another page outside that html. Maybe I can find something in NoScript/uMatrix to point me in the right direction. At this point, since I found the links to the webm files, this is entirely because I want to figure out how this works. – Braden Dodge Nov 18 '17 at 1:48
1

Your mention of Canvas is highly suggestive.

I once worked a bit with someone called Canvas. Basically, it allowed a webmaster to define a certain amount of space. Then a computer programmer could use JavaScript commands to cause certain visual effects (like drawing a line) to appear on the screen.

(I don't recall much more detail, as it was some time ago, and I decided that this possible solution didn't look like it would fulfill the desired goals.)

So, if this technology is indeed what is being used, the web browser doesn't have a traditional *.PNG file with all those different images. Instead, the individual images you see are the result of some JavaScript commands. (The web browser likely doesn't have a Canvas-component-to-PNG-file-format conversion functionality built into the web browser.)

-1

I have just saved gifs from a tweet which had two APNGs. I right clicked on the APNG and selected "copy image address", then pasted this into a new tab. The image in the tab does move like a gif. Once I knew the address worked, I pasted it into VSO downloader and downloaded it then converted to a video format and it has saved not as a gif as such but as a video.

i hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.