fix #120, fix #116

The change codes are from antimatter15/whammy#70 (comment)

Author: leoding86

src/statics/lib/whammy.js

@@ -433,7 +433,67 @@ window.Whammy = (function(){
       data: VP8,
       riff: riff
     }
-  }
+  }    /**
+  * 读取指定偏移量处的小端模式的32位无符号整数
+  * @param buffer - 数据缓冲区
+  * @param offset - 起始偏移量
+  * @returns 32位无符号整数
+  */
+ function readUint32LittleEndian(buffer, offset) {
+   let val = parseInt(
+     buffer
+       .substr(offset, 4)
+       .split("")
+       .map(function(i) {
+         var unpadded = i.charCodeAt(0).toString(2);
+         return new Array(8 - unpadded.length + 1).join("0") + unpadded;
+       })
+       .reverse() // 注意需要翻转字节序才是小端编码
+       .join(""),
+     2
+   );
+   return val;
+ }
+
+ /**
+  * 对于 VP8X，需要提取出其中的 VP8 或 VP8L bit stream chunk。
+  * 关于 VP8X 格式，参见 Extended file format: https://developers.google.com/speed/webp/docs/riff_container#extended_file_format
+  * @param buffer VP8X Chunk数据，不含 "VP8X" tag
+  */
+ function extractBitStreamFromVp8x(buffer) {
+   //console.log("VP8X buffer:", buffer);
+
+   /*
+    跳过以下VP8X头：
+    32bit VP8X Chunk size
+    8bit Flags: Rsv I L E X A R
+    24bit Reserved
+    24bit Canvas Width Minus One
+    24bit Canvas Height Minus One
+   */
+   let offset = 4 + 1 + 3 + 3 + 3;
+   // 搜索第一个"VP8 "或"VP8L" bit stream chunk
+   while (offset < buffer.length) {
+     let chunkTag = buffer.substr(offset, 4);
+     //console.log(`chunkTag: \"${chunkTag}\"`);
+     offset += 4;
+     let chunkSize = readUint32LittleEndian(buffer, offset);
+     //console.log("chunkSize:", chunkSize);
+     offset += 4;
+     switch (chunkTag) {
+       case "VP8 ":
+       case "VP8L":
+         const size = buffer.substr(offset - 4, 4);
+         const body = buffer.substr(offset, chunkSize);
+         return size + body;
+       default:
+         // 跳过不关心的数据块
+         offset += chunkSize;
+         break;
+     }
+   }
+   console.error("VP8X format error: missing VP8/VP8L chunk.");
+ }
 
   // i think i'm going off on a riff by pretending this is some known
   // idiom which i'm making a casual and brilliant pun about, but since
@@ -449,17 +509,27 @@ window.Whammy = (function(){
     while (offset < string.length) {
       var id = string.substr(offset, 4);
       chunks[id] = chunks[id] || [];
-      if (id == 'RIFF' || id == 'LIST') {
-        var len = parseInt(string.substr(offset + 4, 4).split('').map(function(i){
-          var unpadded = i.charCodeAt(0).toString(2);
-          return (new Array(8 - unpadded.length + 1)).join('0') + unpadded
-        }).join(''),2);
+      if (id == "RIFF" || id == "LIST") {
+        var len = readUint32LittleEndian(string, offset + 4)
         var data = string.substr(offset + 4 + 4, len);
+        // console.log(data);
         offset += 4 + 4 + len;
         chunks[id].push(parseRIFF(data));
-      } else if (id == 'WEBP') {
-        // Use (offset + 8) to skip past "VP8 "/"VP8L"/"VP8X" field after "WEBP"
-        chunks[id].push(string.substr(offset + 8));
+      } else if (id == "WEBP") {
+        let vpVersion = string.substr(offset + 4, 4);
+        switch (vpVersion) {
+          case "VP8X":
+            chunks[id].push(extractBitStreamFromVp8x(string.substr(offset + 8)));
+            break;
+          case "VP8 ":
+          case "VP8L":
+            // Use (offset + 8) to skip past "VP8 " / "VP8L" field after "WEBP"
+            chunks[id].push(string.substr(offset + 8));
+            break;
+          default:
+            console.error(`not supported webp version: \"${vpVersion}\"`);
+            break;
+        }
         offset = string.length;
       } else {
         // Unknown chunk type; push entire payload