davidmz / apng-chrome Goto Github PK

The Img folder content, all the PNG's are not optimized. They use more space as needed. Run several combinations of loosless PNG optimizer over them such as PNGout, PNGWolf,...
In Attachment the best possible results ~18% less size.
It will reduce app size and res load time.

I can't upload here. Please download img.zip from here: http://ge.tt/api/1/files/3ZjrpPd/0/blob?download or http://ge.tt/3ZjrpPd/v/0?c

Я прошу реализовать работу APNG в background-image!

http://onlyforweb.wallst.ru/test/canvas-apng/apng-canvas.js
В библиотеке эта функция уже реализована! (если animateImage использовать против DIV).

Thank you for working so hard on this!

When I have the extension turned on in my browser, APNGs are automatically hidden from view.

When I turn it off, I can see them but with no animation.

So I'm doomed whichever method I take.

I'm running the lastest Chrome.

Doesn't work anymore for chrome <59
https://github.com/Raj9039852537/apng-chrome-plugin works tho

Я считаю, что анимацию нужно хранить в специальном списке, и в фоновой странице.
Чтобы, когда заходишь на страницу с одинаковой картинкой (с одинаковым URL) можно было продолжить анимацию.

Я считаю, что PNG кадры и анимацию нужно сохранять. Я считаю что анимация должна происходить в фоновой странице.

Steps to Reproduce:

1. With extension enabled, visit APNG on Wikipedia.
2. Press Shift+Esc to open Chrome's Task Manager.
3. Observe memory usage rise each tick.

When visiting mail.google.com version 0.7.0 the whole browser will become slow and unresponsive.
After deactivating APNG everything is as fast as usual.

Chromium 17.0.938.0 (Developer Build 109847 Linux) Ubuntu 11.04

The plugin stopped working in Chromium versions greater that 47.
It does not work:

• Chromium 48.0.2564.82
• Chromium Dev 50.0.2625.0
• Vivaldi 1.0.385.5
• Opera Stable 35.0.2066.37
• Opera Dev 36.0.2120.0

The Error Console in Developer Tools shows:

content.js:93
Uncaught TypeError: document.getCSSCanvasContext is not a function
getCanvasName @ content.js:93
(anonymous function) @ content.js:147
setStatus @ udeferred.js:32
deferred.resolve @ udeferred.js:54
execCall @ udeferred.js:103
execCall @ udeferred.js:100
execCall @ udeferred.js:100
setStatus @ udeferred.js:32
deferred.resolve @ udeferred.js:54
frame.img.onload @ apng-parser.js:180

The 'bug' list for Chrome APNG has the status as Available this means that any chrome dev can add support to chrome for APNG.

https://code.google.com/p/chromium/issues/detail?id=1171

A quote from one of the google chrome devs "Technically, the status of this bug is Available, which means that it is available for any Chromium or any open-source developers to take up the work to fix this bug."

APNGs are animated as expected in chrome only if they're hard coded in the HTML, if they're added through CSS, i.e.

body {
background: url(my_apng.png);
}

it will only display the first frame

Вместо ваших обычных:
image.style.content = "url(" + chrome.extension.getURL("img/empty.gif") + ")";
image.style.backgroundImage = "-webkit-canvas(" + ctxName + ")";
image.style.backgroundSize = "100% 100%";

Можно воспользоваться фичей:

                    image.style.content = "-webkit-canvas(" + ctxName + ")";

Не меняет background-image, но отображает APNG.

I was looking through the code of this after a PHP script I made didn't work as it should.

That script returns some Cache-Control headers to prevent caching in order to make it work, but this plug-in actively rejects any images with any such headers. It does this with the isVolatile function.

I don't see the advantage of rejecting otherwise healthy images just because they prevent caching, so I'm wondering why this code exists?

Я предлагаю добавить контекстное меню "Save-APNG".
Я видел, в DOM, после того как APNG преобразовался в Canvas, остается "data-apng-src". Так вот! Нужно, чтобы дополнение сохраняло этот APNG из "data-apng-src" через контекстное меню.

So far thx for this wonderfull extension. One problem though I have: I am changing an image button from an "normal" to "loading" to a "normal" image:

When clicking the button:
$("img", $btn).attr("src", "../../img/loading.png");

When finished then back to:
$("img", $btn).attr("src", "../../img/pdf.png");

Unfort. the loading image keeps displaying. When doing this with static images it works as expected ...

thx

To give an example, the following stylesheet will result in an animated emote:

a[href="/emote"]:after {
  width: 100px;
  height: 100px;
  content: "";
  background-image: url(%%animatedpng%%);
  display: inline-block;
}
@keyframes foo {
  /* stuff */
}
@-webkit-keyframes foo {
  /* stuff */
}

but this does not:

@keyframes foo {
  /* stuff */
}
@-webkit-keyframes foo {
  /* stuff */
}
a[href="/emote"]:after {
  width: 100px;
  height: 100px;
  content: "";
  background-image: url(%%animatedpng%%);
  display: inline-block;
}

Since Chrome v59 support APNG natively, you can add a notice on Chrome Web Store.

Пример: в ЖЖ
<img src="http://davidmz.github.io/apng-canvas/images/pyani.png"> — работает
<img src="http://davidmz.github.com/apng-canvas/images/pyani.png"> — не работает

Works great but have a bug by some Websites with APNG for example if the style-sheet zoom some % on mouse over graphic files. See for example: http://www.leechermods.com/2013/04/apng-for-google-chrome-chromium-as.html

The PNG (APNG) Graphics don't load or show up unless open them in a single window each PNG graphic file.

Я у себя сделал фоновое отображение. Но были сделаны ряд улучшений.
https://github.com/Solovei95/apng-chrome

Doesn't work when images are encode with base64 - datauri-0.2.2.jar

But works in this example:
http://clientes.netvisao.pt/ijosemar/google-reader-snow-leopard/whitespinner/demoAPNG1.html

But it doesn't work in this example:
http://clientes.netvisao.pt/ijosemar/google-reader-snow-leopard/whitespinner/demoAPNG2.html
(apng encoded by base64)

Thanks for your work :) 5 stars

There are over 100 extensions available for Edge, but no one can make APNG works. Is it possible to port this extension to Edge?

As discussed in http://wedge.org/pub/bugs/7256/captcha-doesn-t-work-in-chrome/ Wedge has some CAPTCHAs generated with animated GIFs - which don't seem to work when APNG is enabled.

I'm guessing - as I raised over there - that it's related to the fact that the plugin seems to be parsing the image and then drawing it to a Canvas, something that won't work on animated GIFs - the blank box being referred to would be an animated GIF whose first frame is all black, so it seems that only the first frame is being handled. (I could be wrong, though, I only glanced briefly through the plugin's code)

Я предлагаю создать отдельное расширение для браузера Google Chrome, которое позволяет отображать APNG в DIV элементах (CSS:background-image).

Я предлагаю реализовать ряд функций:

• Сохранить APNG (кон. меню)
• Открыть APNG (кон. меню)
• Отключить APNG (настройки)

While I was developing a website, APNG-Chrome was not tracking the Image's src and updating as expected. I was using both the jquery $("#imageID").attr('src'); and document.getElementById("imageID").src = and when the image had a source to begin with it wouldn't update at all, and when the image had no source to begin with it'd update but the width and height wouldn't change to the new image (as expected of the browser and as the browser behaves without apng).

This is a pretty intense use case:

Using Google Chrome 19 on a Windows 7 machine:

1. Have APNG 0.7.1 installed.
2. Install the latest version of the Stylish userstyle found here: http://userstyles.org/styles/53801/reddit-my-andy-ponies
3. Go to www.reddit.com.
4. Try to scroll up and down. Even on a good computer, the scroll will be delayed and unresponsive. This seems to be because My Andy Ponies involves about 84 animated PNGs. The memory used by the page without the userstyle/apng combination is about 20 MB. Adding both the userstyle and apng brings the page's memory usage up to 350 MB, even though none of the apng images included are actually displayed on the page.

I found a little issue, when I use my extension with yours... APNG extension fails spinning in the Google Plus and Orkut, while loading the APNG spinner animation (after an ajax request)...

Ajax Loader for Google™:
https://chrome.google.com/webstore/detail/ajagfhgoccdjcpdfmmjopehnlfgdjifo

Ajax Loader for Google™ Support page:
http://my.opera.com/ilidiomartins/blog/google-ajax-loader-opera-extension

(http://www.orkut.com/ && https://plus.google.com/)

If you go to here
http://www.reddit.com/r/PonyMotes/wiki/emotes

There are several APNGs listed on that page that are shown using some CSS (I didn't create the CSS as that is not my forte) and none of them are animated. To find them easily just search for "Animated Emotes". There are several instances of them.

Google Chrome 31.0.1650.57 (Official Build 235101) m
OS Windows
Blink 537.36 (@161986)
JavaScript V8 3.21.18.7
Flash 11.9.900.152
User Agent Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36

Я предлагаю вложить новый content-script.js
В нем исправлено:

• правильное отображение content вместо background-image.

Скачать: http://html5tester.h19.ru/archive/content-script.js
Я сам лично проверял работоспособность.