MozillaZine

Yet Another Image Format: Google's "WebP"

Discuss various technical topics not related to Mozilla.
Frenzie

User avatar
 
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted October 10th, 2010, 3:21 am

If you've got a sample APNG and GIF image I'll slap it all together in a working form over lunch - although I could probably find something on the web too.
Intelligent alien life does exist, otherwise they would have contacted us.

maxst
 
Posts: 112
Joined: February 11th, 2010, 5:04 am

Post Posted October 10th, 2010, 3:34 am


Frenzie

User avatar
 
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted October 10th, 2010, 3:51 am

Code: Select all
<!DOCTYPE html>
<title>apng-detect.js image swapping Demo</title>
<script src="http://code.eligrey.com/apng-detect/apng-detect.js"></script>
<script>
//<![CDATA[
if (typeof apng_supported !== "boolean") {
   var apng_supported = false;
}
document.addEventListener('DOMContentLoaded',function(){
   if (apng_supported) {
      var images = document.images;
      for (var i=0; i<images.length; i++) {
         if (images[i].src.indexOf('clock.gif') != -1)
            images[i].src = 'http://animatedpng.com/wp-content/uploads/clock.png';
      }
   }
}, false);
//]]>
</script>
<img src="http://animatedpng.com/wp-content/uploads/clock.gif">

Note of course that you shouldn't hotlink the script (or the images) if you decide to use it somewhere.
Last edited by Frenzie on October 10th, 2010, 2:16 pm, edited 1 time in total.
Intelligent alien life does exist, otherwise they would have contacted us.

maxst
 
Posts: 112
Joined: February 11th, 2010, 5:04 am

Post Posted October 10th, 2010, 5:14 am

Is it possible to avoid hardcoding the filename into the script?

Lets say I have
<img src="image1_static.gif">
<img src="image2_anim.gif">
<img src="image3_static.gif">
<img src="image4_anim.gif">
<img src="image5_static.gif">

And I would like to replace only 2 animated images?

Frenzie

User avatar
 
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted October 10th, 2010, 6:07 am

Sure, then you'll have to use the method I described earlier.
Code: Select all
      if (images[i].src.indexOf('anim.gif') != -1)
         images[i].src.replace(/\.gif/i, '.png');

(as noted before, untested)

Alternatively you could do something like this:
Code: Select all
<img src="any-name.gif">
<img src="any-name.gif">
<img src="any-name.gif" class="apng">
<img src="any-name.gif">
<img src="any-name.gif">
<img src="any-name.gif" class="apng">
<img src="any-name.gif">


Then you could do document.getElementsByClassName('apng') instead of document.images and you wouldn't have to do any other testing[1] prior to the source swap. There are many roads that lead to Rome. ;)

[1] You don't really need to do the indexOf() test, but my untested assumption is that this should be faster than the regexp in replace(). In practice it probably won't make much difference, so it should be fine to stick with:
Code: Select all
       images[i].src.replace(/anim\.gif/i, 'anim.png');
Last edited by Frenzie on October 10th, 2010, 2:19 pm, edited 1 time in total.
Intelligent alien life does exist, otherwise they would have contacted us.

maxst
 
Posts: 112
Joined: February 11th, 2010, 5:04 am

Post Posted October 10th, 2010, 7:05 am

I'm thinking of this:

Code: Select all
images[i].src = images[i].src.replace(/anim\.gif$/i,'anim.png');


I'll try class too.

Frenzie

User avatar
 
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted October 10th, 2010, 8:05 am

Just depends on what's more convenient to you; functionally it's equivalent.
Intelligent alien life does exist, otherwise they would have contacted us.

Gingerbread Man

User avatar
 
Posts: 7744
Joined: January 30th, 2007, 10:55 am

Post Posted October 10th, 2010, 9:06 am

Frenzie wrote:document.getElementsByClassName

Requires Internet Explorer 9 (!), Firefox 3 (and probably Camino 2, Seamonkey 2 or K-Meleon 1.6), Safari 3.1 (and probably Chrome 1.0), or Opera 9.5.

maxst
 
Posts: 112
Joined: February 11th, 2010, 5:04 am

Post Posted October 10th, 2010, 9:51 am

If this replacement won't work in older browsers, then older browsers will be using GIFs, which is ok.

Yes, I think the class trick is simplest, no need to bother with "special" file names. It seems to be working fine.

I'll post it on animatedpng.com so other people could learn from it too. Thanks again.

Frenzie

User avatar
 
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted October 10th, 2010, 12:00 pm

Gingerbread Man wrote:
Frenzie wrote:document.getElementsByClassName

Requires Internet Explorer 9 (!), Firefox 3 (and probably Camino 2, Seamonkey 2 or K-Meleon 1.6), Safari 3.1 (and probably Chrome 1.0), or Opera 9.5.

As does canvas, which is used to determine APNG support, and APNG itself. If anything you should just throw a big if(document.getElementsByClassName) around everything. ;)
Intelligent alien life does exist, otherwise they would have contacted us.

Frenzie

User avatar
 
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted October 10th, 2010, 2:19 pm

I just realized I tested the indexOf results against 0. This should've been -1 since 0 is of course a proper position in the string. Whoopsie. Shouldn't affect anything (especially given the final method used), but of course I don't want to spread wrong information.
Intelligent alien life does exist, otherwise they would have contacted us.

maxst
 
Posts: 112
Joined: February 11th, 2010, 5:04 am

Post Posted October 10th, 2010, 9:25 pm

Yes, I figured that out too, and used -1

Here's final version using class:

Code: Select all
<!DOCTYPE html>
<title>apng-detect.js image swapping Demo</title>
<script src="apng-detect.js"></script>
<script>
//<![CDATA[
if (typeof apng_supported !== "boolean") {
   var apng_supported = false;
}
document.addEventListener('DOMContentLoaded',function() {
   if (apng_supported) {
      var apng_elements = document.getElementsByClassName('apng');
      for (var i=0; i<apng_elements.length; i++) {
             apng_elements[i].src = apng_elements[i].src.replace(/gif$/i,'png');
      }
   }
}, false);
//]]>
</script>
<img src="image1.gif">
<img src="image2.gif" class="apng">
<img src="image3.gif">

Frenzie

User avatar
 
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted October 10th, 2010, 11:32 pm

Looks good to me.
Intelligent alien life does exist, otherwise they would have contacted us.

bat999

User avatar
 
Posts: 40
Joined: September 10th, 2010, 3:30 pm
Location: UK

Post Posted October 18th, 2010, 5:09 pm

Hi
I don't know how antimatter15 makes a “RIFF encoded WebP image” from an image.
And then how he converts it into a “EBML/Matroska encoded single frame WebM video”.
I've asked the questions on his blog, but not got a reply yet.

Have you guys any ideas how to do this?

maxst
 
Posts: 112
Joined: February 11th, 2010, 5:04 am

Post Posted October 18th, 2010, 9:43 pm

WebP is already in RIFF container, by definition.

The conversion code is in weppy.js

I assume his code simply changes RIFF header to EBML header, or somehting like that.

Return to MozillaZine Tech


Who is online

Users browsing this forum: amrad and 4 guests