Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    Canada, eh?
    Posts
    133
    Thanks
    2
    Thanked 3 Times in 3 Posts

    JSI; JavaScript Image Functions

    Functions to draw images using JavaScript;

    Normal, 4096 colors available, maximum palette is 1296, zoom & transparency:

    Code:
    function showJSImage(i,_rtn,_link,_target) {
    
      /*****[ By Richard Moyer - v1.1 ]**************************************************************************
    
            Outputs a JSI image where 'i' is the raw image data. '_rtn' should be set to true to return the
            completed image table, or false to document.write it. '_link' is a URL to be used when the user
            clicks on the image, while '_target' specifies the target of the link.
    
    
            - i             = The raw image data.
            - _rtn          = Set to true to return the image instead of 'document.write'ing it.
            - _link         = A URL of a link to go to when the image is clicked on.
            - _target       = The target of the above URL.
    
      **********************************************************************************************************/
    
      if (!i) i = "";
      if (!_link) _link = "";
      if (!_target) _target = "_self";
      if (!_rtn) _rtn = false;
      function JSIonlyHex(inp) { return inp.replace(/[^0-9a-f]/gi,""); }
      var _errs = ["[!00: No image specified]","[!01: Invalid image token length; Must be 4]","[!02: Pixel size NaN]","[!03: Version @ not supported]","[!04: Palette is the wrong length]","[!05: Palette entries insufficient]"];
      if (i == "") return (_rtn) ? _errs[0]: document.write(_errs[0]);
      var x = i.split("\t\t");
      if (x.length != 4) return (_rtn) ? _errs[1]: document.write(_errs[1]);
      var y = Number(parseInt(x[0],10));
      if (isNaN(y)) return (_rtn) ? _errs[2]: document.write(_errs[2]);
      if (x[0].indexOf("-") != -1) return (_rtn) ? _errs[3].replace("@",x[0].substr((x[0].indexOf("-")+1),256)): document.write(_errs[3].replace("@",x[0].substr((x[0].indexOf("-")+1),256)));
      y = Math.floor(Math.abs(y));
      if (y < 1) y = 1;
      if (y > 99) y = 99;
      var inv = JSIonlyHex(x[1]);
      if (inv.length == 6) inv = inv.charAt(0)+inv.charAt(2)+inv.charAt(4);
      _link = _link.replace(/'/g,"\'").replace(/"/g,"&quot;");
      _target = _target.replace(/'/g,"\'").replace(/"/g,"&quot;");
      var p = new Array();
      var _i,__i=0,_temp,_temp2,_temp3,_maxp=(Number(x[2].length)/3);
      x[2] = JSIonlyHex(x[2]);
      if ((Number(x[2].length)%3) != 0) return (_rtn) ? _errs[4]: document.write(_errs[4]);
      for (_i=0;_i<x[2].length;_i=(_i+3)) {
        p[__i] = x[2].substr(_i,3);
        __i++;
      }
      _temp = x[3].split("\t");
      _temp2 = "";
      if (_link != "") _temp2 = "cursor:pointer;\" title=\""+_link+"\" onclick=\"window.open('"+_link+"','"+_target+"');\" onmouseover=\"window.status='"+_link+"'\" onmouseout=\"window.status='Done';return true;";
      var _img = "<table style=\"display:inline;"+_temp2+"\" cellpadding=0 cellspacing=0>";
      for (_i in _temp) {
        _img += "<tr>";
        for (__i=0;__i<_temp[_i].length;__i=(__i+2)) {
          _temp2 = parseInt(_temp[_i].substr(__i,2),36);
          if (_temp2 >= _maxp) return (_rtn) ? _errs[5]: document.write(_errs[5]);
          _temp3 = "";
          if (typeof(p[_temp2]) != "undefined" && p[_temp2] != inv) {
            _temp2 = p[_temp2];
            _temp2 = _temp2.charAt(0)+_temp2.charAt(0)+_temp2.charAt(1)+_temp2.charAt(1)+_temp2.charAt(2)+_temp2.charAt(2);
            _temp3 = "background:#"+_temp2+";";
          }
          _img += "<td style=\"width:"+y+"px;height:"+y+"px;"+_temp3+"\" nowrap></td>";
        }
        _img += "</tr>";
      }
      _img += "</table>";
      return (_rtn) ? _img: document.write(_img);
    }


    Extended JSI function, for rotating/flipping/changing brightness & zoom - uses a different format;

    Code:
    function showXJSImage(i,_cmd,_rtn,_link,_target) {
    
      /*****[ By Richard Moyer - v1.3 ]**************************************************************************
    
            Outputs an xJSI image where 'i' is the raw image data. '_cmd' is a list of comma-separated commands
            to perform on the image. '_rtn' should be set to true to return the completed image table, or false
            to document.write it. '_link' is a URL to be used when the user clicks on the image, while '_target'
            specifies the target of the link.
    
    
            - i             = The raw image data.
            - _cmd          = A comma-separated list of commands to perform on the image. See below.
            - _rtn          = Set to true to return the image instead of 'document.write'ing it.
            - _link         = A URL of a link to go to when the image is clicked on.
            - _target       = The target of the above URL.
    
    
            :: Currently supported commands for the _cmd input;
    
               r=90, r=180, r=270   - This will rotate the image by the given degrees. Only works with the
                                      degrees shown. Rotation is always clockwise.
               f=h, f=v             - Flips the image horizontally with 'h' and vertically with 'v'.
    	   a=#                  - Increases/decreases the brightness of the image by # percentage (-100 to
                                      100).
               z=#                  - Sets the zoom level on the fly, instead of predefined in the image itself.
                                      If you specify more than one z=#, the last valid one will always be the
                                      final one used.
    
      **********************************************************************************************************/
    
      if (!i) i = "";
      if (!_cmd) _cmd = "";
      if (!_link) _link = "";
      if (!_target) _target = "_self";
      if (!_rtn) _rtn = false;
      function JSIonlyHex(inp) { return inp.replace(/[^0-9a-f]/gi,""); }
      function JSIhexadd(a,amount) { var rgb=JSIhex2rgb(a);amount=Math.floor((255*amount)/100);rgb[0]=(rgb[0]+amount);if (rgb[0]<0) rgb[0]=0;if (rgb[0]>255) rgb[0]=255;rgb[1]=(rgb[1]+amount);if (rgb[1]<0) rgb[1]=0;if (rgb[1]>255) rgb[1]=255;rgb[2]=(rgb[2]+amount);if (rgb[2]<0) rgb[2]=0;if (rgb[2]>255) rgb[2]=255;return JSIrgb2hex(rgb[0],rgb[1],rgb[2]); }
      function JSIhex2rgb(col) { return new Array(parseInt(col.substr(0,2),16),parseInt(col.substr(2,2),16),parseInt(col.substr(4,2),16)); }
      function JSIrgb2hex(r,g,b) { var hx=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];return hx[Math.floor(r/16)]+hx[(r%16)]+hx[Math.floor(g/16)]+hx[(g%16)]+hx[Math.floor(b/16)]+hx[(b%16)]; }
      var _errs = ["[!00: No image specified]","[!01: Invalid image token length; Must be 4]","[!02: Pixel size NaN]","[!03: Only version e1.x is supported]","[!04: Palette is the wrong length]","[!05: Palette entries insufficient]"];
      if (i == "") return (_rtn) ? _errs[0]: document.write(_errs[0]);
      var x = i.split("\t\t");
      if (x.length != 4) return (_rtn) ? _errs[1]: document.write(_errs[1]);
      var y = Number(parseInt(x[0],10));
      if (isNaN(y)) return (_rtn) ? _errs[2]: document.write(_errs[2]);
      if (x[0].indexOf("-") == -1 || x[0].substr((x[0].indexOf("-")+1),2).toLowerCase() != "e1") return (_rtn) ? _errs[3]: document.write(_errs[3]);
      y = Math.floor(Math.abs(y));
      if (y < 1) y = 1;
      if (y > 99) y = 99;
      var inv = JSIonlyHex(x[1]);
      if (inv.length == 3) inv = inv.charAt(0)+inv.charAt(0)+inv.charAt(1)+inv.charAt(1)+inv.charAt(2)+inv.charAt(2);
      var _cmd = String(_cmd.toLowerCase()).split(",");
      _link = _link.replace(/'/g,"\'").replace(/"/g,"&quot;");
      _target = _target.replace(/'/g,"\'").replace(/"/g,"&quot;");
      var p = new Array();
      var _temp,_temp2,_temp3,_i,__i=0,___i,_res,_maxp=(Number(x[2].length)/6);
      x[2] = JSIonlyHex(x[2]);
      if ((Number(x[2].length)%6) != 0) return (_rtn) ? _errs[4]: document.write(_errs[4]);
      for (_i=0;_i<x[2].length;_i=(_i+6)) {
        p[__i] = x[2].substr(_i,6);
        __i++;
      }
    
      _temp = x[3].split("/");
      for (_i in _temp) {
        _temp[_i] = _temp[_i].split(",");
      }
      if (_cmd != "") {
        for (_i in _cmd) {
          _res = "";
          if (_cmd[_i] == "r=90") {
            for (__i=0;__i<_temp[0].length;__i++) {
              if (_res != "") _res += "/";
              for (___i=(_temp.length-1);___i>=0;___i--) {
                if (_res != "" && _res.charAt(_res.length-1) != "/") _res += ",";
                _res += _temp[___i][__i];
              }
            }
          }
          else if (_cmd[_i] == "r=180") {
            for (__i=(_temp.length-1);__i>=0;__i--) {
              if (_res != "") _res += "/";
              for (___i=(_temp[0].length-1);___i>=0;___i--) {
                if (_res != "" && _res.charAt(_res.length-1) != "/") _res += ",";
                _res += _temp[__i][___i];
              }
            }
          }
          else if (_cmd[_i] == "r=270") {
            for (__i=(_temp[0].length-1);__i>=0;__i--) {
              if (_res != "") _res += "/";
              for (___i=0;___i<=(_temp.length-1);___i++) {
                if (_res != "" && _res.charAt(_res.length-1) != "/") _res += ",";
                _res += _temp[___i][__i];
              }
            }
          }
          else if (_cmd[_i] == "f=h") {
            for (__i=0;__i<_temp.length;__i++) {
              if (_res != "") _res += "/";
              for (___i=(_temp[__i].length-1);___i>=0;___i--) {
                if (_res != "" && _res.charAt(_res.length-1) != "/") _res += ",";
                _res += _temp[__i][___i];
              }
            }
          }
          else if (_cmd[_i] == "f=v") {
            for (__i=(_temp.length-1);__i>=0;__i--) {
              if (_res != "") _res += "/";
              for (___i=0;___i<_temp[__i].length;___i++) {
                if (_res != "" && _res.charAt(_res.length-1) != "/") _res += ",";
                _res += _temp[__i][___i];
              }
            }
          }
          else if (_cmd[_i].substr(0,2) == "a=") {
            var amt = Number(_cmd[_i].substr(2,(String(_cmd[_i]).length-2)));
            if (isNaN(amt)) amt = 0;
            if (amt < -100) amt = -100;
            if (amt > 100) amt = 100;
            for (__i=0;__i<p.length;__i++) {
              if (p[__i] != inv) {
                p[__i] = JSIhexadd(p[__i],amt);
                if (p[__i] == inv) {
                  if (p[__i] == "FFFFFF") p[__i] = JSIhexadd(p[__i],-0.3922);
                  else p[__i] = JSIhexadd(p[__i],0.3922);
                }
              }
            }
          }
          else if (_cmd[_i].substr(0,2) == "z=") {
            var amt = Number(_cmd[_i].substr(2,(String(_cmd[_i]).length-2)));
            if (!isNaN(amt)) {
              amt = Math.floor(amt);
              if (amt < 1) amt = 1;
              if (amt > 99) amt = 99;
              y = amt;
            }
          }
          if (_res != "") {
            _temp = _res.split("/");
            for (_i in _temp) {
              _temp[_i] = _temp[_i].split(",");
            }
          }
        }
      }
      _temp2 = "";
      if (_link != "") _temp2 = "cursor:pointer;\" title=\""+_link+"\" onclick=\"window.open('"+_link+"','"+_target+"');\" onmouseover=\"window.status='"+_link+"'\" onmouseout=\"window.status='Done';return true;";
      var _img = "<table style=\"display:inline;"+_temp2+"\" cellpadding=0 cellspacing=0>";
      for (_i in _temp) {
        _img += "<tr>";
        for (__i in _temp[_i]) {
          _temp2 = parseInt(_temp[_i][__i],36);
          if (_temp2 >= _maxp) return (_rtn) ? _errs[5]: document.write(_errs[5]);
          _temp3 = "";
          if (typeof(p[_temp2]) != "undefined" && p[_temp2] != inv) _temp3 = "background:#"+p[_temp2]+";";
          _img += "<td style=\"width:"+y+"px;height:"+y+"px;"+_temp3+"\" nowrap></td>";
        }
        _img += "</tr>";
      }
      _img += "</table>";
      return (_rtn) ? _img: document.write(_img);
    }


    The formats can be edited/created by hand, pixel by pixel, or can be created/manipulated by PHP, using functions posted here: http://www.codingforums.com/showthread.php?t=185232.

    The normal JSI image is;

    Zoom [tab][tab] Transparent Color [tab][tab] Palette [tab][tab] Pixel Matrix

    Zoom is the zoom level of the image. 1 = 1x1 pixels, 2 = 2x2 pixels, etc.
    Transparent Color is the color in the image which is transparent. If there is none, leave an empty space (so 4 tabs to just skip it).
    Palette is the palette of the image. Each palette entry is a 3-character HTML color. So FFF would be white, 00F would be blue, etc. You can use whatever characters you want to separate the palette entries, or just bunch them all together, as the parser doesn't care. So "FFF,00F,0F0" is as valid as "FFF00F0F0" or "FFFG00FH0F0BLU42!"
    Pixel Matrix is a tab separated row by row matrix of the image, each entry a base 36 representation of the palette. As an example, the first enty in the palette is 0, the second entry is 1, then 2, etc, etc. So to access palette color 1, you'd use "00" for that pixel. The second would be "01", etc. Since it's of a base 36, it means that for palette #11, it would be "0A", followed by "0B" all the way to palette #36 being "0Z," looping back to "10" for palette #37. Basicly like hex that goes all the way to Z instead of F.

    As for an image example, a simple checkerboard 3x3 image would go like so:

    Code:
    var x = "1		0F0		000,FFF,0F0		000100	010201	000100";
    As you can see, the transparent color is 0F0, which is used in the center of the image, making it transparent.



    Now, onto xJSI. This image format uses full 6-digit HTML colors, allowing maximum color depth, as well as an extended 16,777,216 palette limit. Beyond that, it was designed to allow command input (the function, at least, not the format) to manipulate the image before outputting it. The format is basicly the same as the normal JSI image. The main difference is the pixel matrix, and the zoom. With xJSI (and any other modified version of the base JSI images), the version number is in the zoom level. So instead of a zoom of "1" - it'd be "1-e1.0" - with "e1.0" being the version number, and the dash signifying the end of the zoom level entry.

    The pixel matrix varies in that it MUST be comma-separated for each entry, instead of bunched together in 2-byte numbers. This is to allow variable lengths, as ",0" is 4 bytes shorter than "000000." The same base 36 rule applies. It also is slash separated instead of tab separated for each row.

    So, using the example image above, the xJSI format would look like so;

    Code:
    var x = "1-e1.0		00FF00		000000,FFFFFF,00FF00		0,1,0/1,2,1/0,1,0";


    Now, I could leave it at that, and let you design your own converter, or editor in order to actually use the format more efficiently, but instead, I have programmed PHP functions that will both convert a raw GD image into a JSI image, and output it, or convert a JSI image into a raw GD image, to export or continue editing as you please. You can find those posted here: http://www.codingforums.com/showthread.php?t=185232.



    Limitations:

    The JSI image format uses a <table> to control how it is displayed, and although it does have URL support built in, it's very limited over-all. I also would NOT recommend actually using this to display images any greater than 48x48 pixels, or anything even approaching that. The reason is because it's a table, and each pixel is a table cell. It will get more and more memory intensive the bigger the image.


    Intended Use:

    Portable documents that you want to have little images, or rounded corners on boxes, etc. Maybe even just as a place to keep your images where nobody can right-click -> save as (doesn't stop taking a screenshot and editing the image out though :-p).
    Last edited by Eternity Angel; 12-24-2009 at 04:46 AM.
    Bored? Might as well play Fantasian Kingdoms: http://www.fantasiankingdoms.com/

    Check out my JavaScript Image Project: http://codingforums.com/showthread.php?t=185231

  • #2
    Moderator
    Join Date
    May 2002
    Location
    Hayward, CA
    Posts
    1,461
    Thanks
    1
    Thanked 23 Times in 21 Posts
    Have you heard of PNGlets?
    http://elf.org/pnglets/
    "The first step to confirming there is a bug in someone else's work is confirming there are no bugs in your own."
    June 30, 2001
    author, Verbosio prototype XML Editor
    author, JavaScript Developer's Dictionary
    https://alexvincent.us/blog

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    Canada, eh?
    Posts
    133
    Thanks
    2
    Thanked 3 Times in 3 Posts
    It only works with Netscape 4.06+, ...
    Lmao, amusing. The examples didn't work for me, so... not really good.

    However, if there already is something like this, then I wasted time and effort inventing a new image format and display functions for it. I haven't exactly LOOKED though, as I don't go looking for things I need, instead I just make them. :-p
    Bored? Might as well play Fantasian Kingdoms: http://www.fantasiankingdoms.com/

    Check out my JavaScript Image Project: http://codingforums.com/showthread.php?t=185231


  •  

    Posting Permissions

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