libbpg/post.js

/*
 * BPG Javascript decoder
 *
 * Copyright (c) 2014 Fabrice Bellard
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
 * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * 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;
    this['onload'] = null;
}

window['BPGDecoder'].prototype = {

malloc: Module['cwrap']('malloc', 'number', [ 'number' ]),

free: Module['cwrap']('free', 'void', [ 'number' ]),

bpg_decoder_open: Module['cwrap']('bpg_decoder_open', 'number', [ ]),

bpg_decoder_decode: Module['cwrap']('bpg_decoder_decode', 'number', [ 'number', 'array', 'number' ]),

bpg_decoder_get_info: Module['cwrap']('bpg_decoder_get_info', 'number', [ 'number', 'number' ]),

bpg_decoder_start: Module['cwrap']('bpg_decoder_start', 'number', [ 'number', 'number' ]),

bpg_decoder_get_line: Module['cwrap']('bpg_decoder_get_line', 'number', [ 'number', 'number' ]),

bpg_decoder_close: Module['cwrap']('bpg_decoder_close', 'void', [ 'number' ] ),

load: function(url) 
{
    var request = new XMLHttpRequest();
    var this1 = this;

    request.open("get", url, true);
    request.responseType = "arraybuffer";
    request.onload = function(event) {
        this1._onload(request, event);
    };
    request.send();
},

_onload: function(request, event)
{
    var data = request.response;
    var array = new Uint8Array(data);
    var img, w, h, img_info_buf, cimg, p0, rgba_line, w4;
    var heap8, heap32, dst, v, i, y, func;

    //    console.log("loaded " + data.byteLength + " bytes");

    img = this.bpg_decoder_open();

    if (this.bpg_decoder_decode(img, array, array.length) < 0) {
        console.log("could not decode image");
        return;
    }
    
    img_info_buf = this.malloc(9 * 4);
    this.bpg_decoder_get_info(img, img_info_buf);
    /* extract the image info */
    heap32 = Module['HEAPU32'];
    w = heap32[img_info_buf >> 2];
    h = heap32[(img_info_buf + 4) >> 2];
    this.free(img_info_buf);

//    console.log("image " + w + " " + h);
    
    /* select RGBA32 output */
    this.bpg_decoder_start(img, 1);

    rgba_line = this.malloc(w * 4);
    cimg = this.ctx.createImageData(w, h);
    dst = cimg.data;
    p0 = 0;
    heap8 = Module['HEAPU8'];
    w4 = w * 4;
    for(y = 0; y < h; y++) {
        this.bpg_decoder_get_line(img, rgba_line);
        for(i = 0; i < w4; i = (i + 1) | 0) {
            dst[p0] = heap8[(rgba_line + i) | 0] | 0;
            p0 = (p0 + 1) | 0;
        }
    }

    this.free(rgba_line);

    this.bpg_decoder_close(img);

    this['imageData'] = cimg;
    
    if (this['onload'])
        this['onload']();
}

};

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 imageData = this['imageData'];
            /* resize the canvas to the image size */
            canvas.width = imageData.width;
            canvas.height = imageData.height;

            /* draw the image */
            ctx.putImageData(imageData, 0, 0);
        }).bind(dec, canvas, ctx);
        dec.load(url);
    }
};