1.在libwebp的webp_js库尝试直接把animatedwebp转png，发现不支持
2.尝试对animated webp拆帧(tools使用的webpmux)
3.在前端用的demux.js解析
4.拆帧后就可以用webpjs解码png了
先看0.6版的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./libwebp-0.6.0.min.js"></script>
<script src="./demux.js"></script>
<script src="./viewer.js"></script>
</head>
<body>
<div id="view">
<button id="gen">gen</button>
</div>
<canvas id="canvas" width="512" height="512"></canvas>
</body>
<script>
var webpdecoder=new WebPDecoder();
// document.querySelector("#gen").addEventListener()
document.querySelector("#gen").addEventListener("click", function () {
getImage2();
});
function getImage2() {
xhrImg().then(buffer=>{
var response=convertBinaryToArray(buffer);
var imagearray= WebPRiffParser(response,0)
imagearray['response']=response;
imagearray['rgbaoutput']=true;
imagearray['dataurl']=false;
console.log(imagearray);
new WebPImageViewer(webpdecoder,imagearray,function(frame){
console.log(frame)
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width=imagearray['header']?imagearray['header']['canvas_width']:frame['imgwidth'];
var height=imagearray['header']?imagearray['header']['canvas_height']:frame['imgheight'];
canvas.height=height;
canvas.width=width;
var imagedata = ctx.createImageData(width, height);
var rgba=frame['rgbaoutput'];
for(var i=0;i<width*height*4;i++)
imagedata.data[i]=rgba[i];
ctx.putImageData(imagedata, 0, 0);
});
})
}
function convertBinaryToArray(binary) {
var arr = new Array();
var num=binary.length;
var i;
for(i=0;i<num;++i)
arr.push(binary.charCodeAt(i));
return arr;
}
function drawframes(){
}
function xhrImg(){
return new Promise(function(resolve, reject) {
var http = new XMLHttpRequest();
http.open('get', 'http://localhost:8080/webp1.webp');
if (http.overrideMimeType)
http.overrideMimeType('text/plain; charset=x-user-defined');
else
http.setRequestHeader('Accept-Charset', 'x-user-defined');
http.onreadystatechange = function() {
if(http.readyState == 4){
if (typeof http.responseBody=='undefined') {
var response = http.responseText.split('').map(function(e){return String.fromCharCode(e.charCodeAt(0) & 0xff)}).join('');
} else {
var response = convertResponseBodyToText(http.responseBody);
}
// WebPDecodeAndDraw(response);
resolve(response)
} //else alert('Cannot load file. Please, try again');
};
http.send(null);
})
}
</script>
</html>
新版代码如何解析拆帧后逻辑还要研究下
官方给的回复如下，要对c代码进行改造。
先考虑用muxjs解析后再用sdl进行decode
