SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Embedded Images With Javascript

    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:

    Code JavaScript:
             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.
    Follow Me On Twitter: BryceRay

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Have you had much luck with base64 encoded data?
    For example: http://dean.edwards.name/weblog/2005/06/base64-ie/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Follow Me On Twitter: BryceRay

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bar338 View Post
    Is there a reason he chose to use PHP or can the same functionality be duplicated with javascript/jquery.
    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/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)))}
    Follow Me On Twitter: BryceRay

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bar338 View Post
    Unfortunately, the new method he describes continues to rely on a php script for encoding/decoding so it will not work for my purposes.
    Then I doubt that there is any other viable solution that what you have started with.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast toytron's Avatar
    Join Date
    Nov 2006
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •