Embedded Images With Javascript

JavaScript
1

I’m trying to find the best way to embed images into my application. However, I’m having a hard time finding the fast (browser-compatible) method. It is important that I find a reliable method because the application must be self-contained so it can be easily shared. Below is a sample of my current approach:

         var pictures = {
    "alert.png":  new Array(
     new Array(-1,-1,-1,-1,-1,0,-1,1,1,1,-1,-1,-1,-1,-1,-1,-1),
     new Array(-1,-1,-1,-1,-1,-1,2,1,1,1,3,0,-1,-1,-1,-1,-1),
     new Array(-1,-1,-1,-1,0,-1,1,4,5,6,1,-1,0,-1,-1,-1,-1),
     new Array(-1,-1,-1,-1,-1,7,2,8,9,10,2,11,-1,-1,-1,-1,-1),
     new Array(-1,-1,-1,0,-1,2,12,13,14,15,16,2,-1,0,-1,-1,-1),
     new Array(-1,-1,0,-1,1,1,17,18,19,20,21,1,1,-1,0,-1,-1),
     new Array(-1,0,-1,22,1,1,23,24,19,25,26,2,1,27,-1,0,-1),
     new Array(-1,-1,-1,1,2,28,29,30,19,31,29,32,2,1,-1,-1,-1),
     new Array(0,-1,2,1,33,34,29,35,36,30,29,37,38,1,7,-1,0),
     new Array(-1,2,1,39,40,41,29,42,43,44,29,41,45,46,1,47,-1),
     new Array(0,7,1,48,49,29,29,50,51,52,29,29,53,54,2,2,0),
     new Array(11,1,55,56,29,29,29,57,58,59,29,29,29,60,61,1,62),
     new Array(7,1,63,64,65,65,66,67,68,69,64,70,70,71,72,1,1),
     new Array(1,7,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1)
    ),
    "back_disabled.png":  new Array(
     new Array(0,1,0,0,0,1,0,0,0,0,2,1,0,0,0,2,3,4,5),
     new Array(3,3,6,7,7,7,7,7,6,4,6,7,7,4,7,7,8,9,10),
     new Array(7,8,5,11,9,9,9,9,11,5,9,11,9,11,9,9,12,13,14),
     new Array(15,9,16,17,17,17,17,17,12,17,17,17,17,16,17,17,18,14,19),
     new Array(11,12,20,10,10,13,13,10,13,13,10,10,13,10,10,18,21,22,23),
     new Array(12,17,10,18,18,24,24,18,18,24,24,25,26,18,24,24,27,28,29),
     new Array(16,20,18,21,21,21,21,21,21,30,31,32,33,34,21,34,35,19,36),
     new Array(20,13,21,27,37,37,37,37,38,39,40,41,42,37,37,14,43,23,44),
     new Array(13,21,37,14,14,14,45,46,47,48,49,50,51,35,14,43,30,52,53),
     new Array(18,34,35,35,22,54,55,56,57,58,50,59,60,43,22,22,19,44,61),
     new Array(34,27,43,30,28,61,62,50,63,64,59,65,53,28,22,19,23,25,66),
     new Array(37,35,67,28,19,19,19,44,68,69,60,25,52,19,19,70,52,71,60),
     new Array(14,22,19,23,23,70,29,23,23,72,36,67,22,23,23,23,72,73,69),
     new Array(43,30,70,29,52,36,52,52,52,52,52,28,27,52,29,72,25,74,65),
     new Array(30,19,29,52,72,52,72,72,72,72,72,44,29,72,72,72,71,68,75),
     new Array(67,23,36,25,71,71,53,53,25,53,71,53,71,71,53,71,73,65,76),
     new Array(52,53,73,60,69,68,68,68,68,69,68,69,69,68,69,69,65,77,59),
     new Array(73,78,76,79,79,79,45,45,45,45,45,45,79,45,45,45,80,81,64),
     new Array(82,45,64,83,83,83,83,83,83,83,83,83,83,83,83,83,84,63,83)
    )};
var pictureColors = {
    "alert.png":  new Array("#0000","#E90000","#E80000","#90000","#E90808","#EB1818","#E90101","#EA0000","#EF3838","#FFF5F5","#EE2B2B","#C0000","#EB0B0B","#D98E8E","#92A2A2","#DE7E7E","#EA0808","#EF3333","#B6C9C9","#000000","#B4C9C9","#EF2F2F","#EB0000","#FFEAEA","#B9BBBB","#B8BBBB","#FFDFDF","#B0000","#F48C8C","#FFFFFF","#BFBFBF","#BCBCBC","#F37B7B","#ED2323","#FEF9F9","#C6C6C6","#101010","#FEF8F8","#EC1C1C","#E70000","#FAD7D7","#FEFEFE","#E6E6E6","#989898","#E3E3E3","#FAD5D5","#E60000","#A0000","#F15A5A","#FEF3F3","#D9D9D9","#454545","#C7C6C6","#FEF4F4","#F15C5C","#EB1A1A","#FCE1E1","#DCEBEB","#607474","#D2E2E2","#FCE0E0","#EB1919","#70000","#EB1515","#EE4444","#EE4848","#EE4747","#EF4A4A","#F25050","#EF4747","#EE4545","#EE4141","#EB1414"),
    "back_disabled.png":  new Array("#EAEAEA","#EBEBEB","#E9E9E9","#E8E8E8","#E5E5E5","#E2E2E2","#E7E7E7","#E6E6E6","#E4E4E4","#E1E1E1","#DBDBDB","#E0E0E0","#DFDFDF","#DADADA","#D3D3D3","#E3E3E3","#DEDEDE","#DDDDDD","#D9D9D9","#CCCCCC","#DCDCDC","#D7D7D7","#D0D0D0","#CACACA","#D8D8D8","#C4C4C4","#9C9C9C","#D4D4D4","#CECECE","#C9C9C9","#CFCFCF","#7B7B7B","#505050","#8C8C8C","#D6D6D6","#D2D2D2","#C7C7C7","#D5D5D5","#939393","#404040","#484848","#747474","#AAAAAA","#D1D1D1","#C5C5C5","#B2B2B2","#535353","#3D3D3D","#545454","#767676","#9F9F9F","#B6B6B6","#C8C8C8","#C3C3C3","#888888","#575757","#5F5F5F","#727272","#868686","#B1B1B1","#BDBDBD","#C1C1C1","#A1A1A1","#A7A7A7","#ACACAC","#B9B9B9","#BFBFBF","#CDCDCD","#BCBCBC","#BBBBBB","#CBCBCB","#C2C2C2","#C6C6C6","#C0C0C0","#BEBEBE","#B7B7B7","#B5B5B5","#B4B4B4","#BABABA","#B3B3B3","#AFAFAF","#ADADAD","#B8B8B8","#A9A9A9","#A8A8A8")
};

function initPictures() {
        for (key in pictures) {
            var divs = getElementsByClassName(key);
            if (divs.length > 0) {
                var oTbl = document.createElement("Table");
                oTbl.style.borderCollapse = "collapse";
                oTbl.style.tableLayout = "fixed";
                oTbl.style.display = "inline";
                for (var i = 0; i < pictures[key].length; i++) {
                    var oTR = oTbl.insertRow(i);
                    for (var j = 0; j < pictures[key][i].length; j++) {
                        var oTD = oTR.insertCell(j);
                        var index = pictures[key][i][j];
                        if (index != -1) {
                            oTD.bgColor = pictureColors[key][index];
                        }
                        oTD.style.padding = "0";
                        oTD.style.margin = "0";
                        oTD.style.width = "1px";
                        oTD.style.height = "1px";
                    }
                }
                divs[0].appendChild(oTbl);
                for (var k = 1; k < divs.length; k++) {
                    divs[k].appendChild(oTbl.cloneNode(true));
                }
            }
        }
    }
    
    function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\\\b' + classname + '\\\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
    
        initPictures();

Problems with this approach:
After just a few images it creates a very large javascript file. Seems like it is pretty inefficient as far as code goes.

Goals of optimal approach:
Must work in IE6/7 and All other modern browsers.
Performance must be a high priority
It will only be used for small icons
Can use javascript, jquery, css, base64, or any combination.

I appreciate any suggestions on approaches or techniques.

Thanks.

2

Have you had much luck with base64 encoded data?
For example: http://dean.edwards.name/weblog/2005/06/base64-ie/

3

I’ve looked at this approach and it looks like it works well. However, it uses PHP to encode/decode the data. This won’t work for me as my solution requires no server-side processing. Is there a reason he chose to use PHP or can the same functionality be duplicated with javascript/jquery.

4

Yes. It’s where he said “Internet Explorer does not support Base64 encoding of images”

There is also a bit of an update regarding IE:
http://dean.edwards.name/weblog/2005/06/base64-sexy/

5

Unfortunately, the new method he describes continues to rely on a php script for encoding/decoding so it will not work for my purposes.

img{behavior:expression((this.runtimeStyle.behavior=“none”)&&(/^data:.*;base64/i.test(this.src))&&(this.src=“/my/base64.php?”+this.src.slice(5)))}

6

Then I doubt that there is any other viable solution that what you have started with.

7

I’m looking for the same solution. I want to make a standalone html5 app that doesn’t rely on a server language to encode to base64.
I want to download an image and store it in a local Safari html5 database (Iphone/ipod).
One could use canvas and the .todataurl method, but this has security restrictions. (local domain only).
I was hoping that JQuery could do this, but I only see JSON, txt and Html in the docs.
Anybody have an Idea how this can be done?