Browse Source

got it working with WASM (again?)

oops
forest 3 months ago
parent
commit
df25ecbdd8
11 changed files with 6947 additions and 116 deletions
  1. +5
    -1
      .gitignore
  2. +2
    -2
      Makefile
  3. +2466
    -10
      html/bpgdec.js
  4. BIN
      html/bpgdec.wasm
  5. +2466
    -10
      html/bpgdec8.js
  6. BIN
      html/bpgdec8.wasm
  7. +1937
    -11
      html/bpgdec8a.js
  8. BIN
      html/bpgdec8a.wasm
  9. +2
    -0
      html/index.html
  10. +66
    -82
      post.js
  11. +3
    -0
      pre.js

+ 5
- 1
.gitignore View File

@ -1,2 +1,6 @@
*.o
*.out
*.out
bpgenc
bpgdec
*.d
*.a

+ 2
- 2
Makefile View File

@ -49,10 +49,10 @@ endif
# Emscriptem config
EMLDFLAGS:=-s "EXPORTED_FUNCTIONS=['_bpg_decoder_open','_bpg_decoder_decode','_bpg_decoder_get_info','_bpg_decoder_start','_bpg_decoder_get_frame_duration','_bpg_decoder_get_line','_bpg_decoder_close','_malloc','_free']"
EMLDFLAGS+=-s NO_FILESYSTEM=1 -s NO_BROWSER=1
EMLDFLAGS+=-s NO_FILESYSTEM=1 -s 'EXPORTED_RUNTIME_METHODS=["cwrap"]'
#EMLDFLAGS+=-O1 --pre-js pre.js --post-js post.js
# Note: the closure compiler is disabled because it adds unwanted global symbols
EMLDFLAGS+=-O0 --memory-init-file 0 --closure 0 --pre-js pre.js --post-js post.js
EMLDFLAGS+=-O1 --memory-init-file 0 --closure 0 --pre-js pre.js --post-js post.js
EMCFLAGS:=$(CFLAGS)
LDFLAGS=-g


+ 2466
- 10
html/bpgdec.js
File diff suppressed because it is too large
View File


BIN
html/bpgdec.wasm View File


+ 2466
- 10
html/bpgdec8.js
File diff suppressed because it is too large
View File


BIN
html/bpgdec8.wasm View File


+ 1937
- 11
html/bpgdec8a.js
File diff suppressed because it is too large
View File


BIN
html/bpgdec8a.wasm View File


+ 2
- 0
html/index.html View File

@ -21,6 +21,8 @@ Dynamic loading in a canvas:<br>
<script>
(function ()
{
Array.from(document.querySelectorAll("img")).forEach(x => load_bpg_image(x))
var img, canvas, ctx;
canvas = document.getElementById("mycanvas");


+ 66
- 82
post.js View File

@ -1,3 +1,4 @@
/*
* BPG Javascript decoder
*
@ -21,6 +22,8 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
window['BPGDecoder'] = function(ctx) {
this.ctx = ctx;
this['imageData'] = null;
@ -57,7 +60,7 @@ load: function(url)
request.open("get", url, true);
request.responseType = "arraybuffer";
request.onload = function(event) {
this1._onload(request, event);
wasmModuleIsReady.then(() => this1._onload(request, event));
};
request.send();
},
@ -130,87 +133,68 @@ _onload: function(request, event)
};
window.onload = function() {
var i, n, el, tab, tab1, url, dec, canvas, id, style, ctx, dw, dh;
/* put all images to load in a separate array */
tab = document.images;
n = tab.length;
tab1 = [];
for(i = 0; i < n; i++) {
el = tab[i];
url = el.src;
if (url.substr(-4,4).toLowerCase() == ".bpg") {
tab1[tab1.length] = el;
}
}
/* change the tags to canvas */
n = tab1.length;
for(i = 0; i < n; i++) {
el = tab1[i];
url = el.src;
canvas = document.createElement("canvas");
if (el.id)
canvas.id = el.id;
if (el.className)
canvas.className = el.className;
/* handle simple attribute cases to resize the canvas */
dw = el.getAttribute("width") | 0;
if (dw) {
canvas.style.width = dw + "px";
}
dh = el.getAttribute("height") | 0;
if (dh) {
canvas.style.height = dh + "px";
}
el.parentNode.replaceChild(canvas, el);
ctx = canvas.getContext("2d");
dec = new BPGDecoder(ctx);
dec.onload = (function(canvas, ctx) {
var dec = this;
var frames = this['frames'];
var imageData = frames[0]['img'];
function next_frame() {
var frame_index = dec.frame_index;
/* compute next frame index */
if (++frame_index >= frames.length) {
if (dec['loop_count'] == 0 ||
dec.loop_counter < dec['loop_count']) {
frame_index = 0;
dec.loop_counter++;
} else {
frame_index = -1;
}
}
if (frame_index >= 0) {
dec.frame_index = frame_index;
ctx.putImageData(frames[frame_index]['img'], 0, 0);
setTimeout(next_frame, frames[frame_index]['duration']);
}
};
/* resize the canvas to the image size */
canvas.width = imageData.width;
canvas.height = imageData.height;
/* draw the image */
ctx.putImageData(imageData, 0, 0);
/* if it is an animation, add a timer to display the next frame */
if (frames.length > 1) {
dec.frame_index = 0;
dec.loop_counter = 0;
setTimeout(next_frame, frames[0]['duration']);
}
}).bind(dec, canvas, ctx);
dec.load(url);
}
window.load_bpg_image = function(el) {
url = el.src;
canvas = document.createElement("canvas");
if (el.id)
canvas.id = el.id;
if (el.className)
canvas.className = el.className;
/* handle simple attribute cases to resize the canvas */
dw = el.getAttribute("width") | 0;
if (dw) {
canvas.style.width = dw + "px";
}
dh = el.getAttribute("height") | 0;
if (dh) {
canvas.style.height = dh + "px";
}
el.parentNode.replaceChild(canvas, el);
ctx = canvas.getContext("2d");
dec = new BPGDecoder(ctx);
dec.onload = (function(canvas, ctx) {
var dec = this;
var frames = this['frames'];
var imageData = frames[0]['img'];
function next_frame() {
var frame_index = dec.frame_index;
/* compute next frame index */
if (++frame_index >= frames.length) {
if (dec['loop_count'] == 0 ||
dec.loop_counter < dec['loop_count']) {
frame_index = 0;
dec.loop_counter++;
} else {
frame_index = -1;
}
}
if (frame_index >= 0) {
dec.frame_index = frame_index;
ctx.putImageData(frames[frame_index]['img'], 0, 0);
setTimeout(next_frame, frames[frame_index]['duration']);
}
};
/* resize the canvas to the image size */
canvas.width = imageData.width;
canvas.height = imageData.height;
/* draw the image */
ctx.putImageData(imageData, 0, 0);
/* if it is an animation, add a timer to display the next frame */
if (frames.length > 1) {
dec.frame_index = 0;
dec.loop_counter = 0;
setTimeout(next_frame, frames[0]['duration']);
}
}).bind(dec, canvas, ctx);
dec.load(url);
};
/* end of dummy function enclosing all the emscripten code */


+ 3
- 0
pre.js View File

@ -23,3 +23,6 @@
*/
(function () {
var Module = {};
const wasmModuleIsReady = new Promise(function(resolve, reject) {
Module.onRuntimeInitialized = resolve;
});

Loading…
Cancel
Save