Compactador CSS e JS para PNG

Como compactar e utilizar seu javascript e/ou css em uma imagem png

Atenção:Esta aplicação funciona apenas nos navegadores Chrome, Firefox, Opera, Safari e IE9 Beta. Não Funciona no IE 8 ou mais antigos.

Veja também o post que deu origem ao projeto.

Para compactar:

  1. Copie seu códio Javascript ou CSS na caixa abaixo:

  2. Clique no botão abaixo para gerar a imagem:
    .
  3. Clique com o botão direito na imagem que surgirá abaixo e salve como png no seu computador:

    This text is displayed if your browser does not support HTML5 Canvas.

  4. Indexar a imagem em um programa gráfico como GIMP ou Photoshop.

    Dica: No gimp esta função fica em: Imagem->Modo->Indexado…->Gerar Paleta Otimizada com no máximo 255 cores.

  5. Está Pronto! Quer compactar outro código? Refresh (F5)! Lamento, não implementei uma maneira mais fácil. Mas vá… Qual a dificuldade de apertar um mero (F5)?

Para Utilizar:

  1. Copie o código javascript abaixo para sua página ou arquivo js:
    1. var f,proxy,d=document;
    2.  
    3. var addCss = function(s) {
    4.   var c = d.createElement(‘style’);
    5.   c.type = ‘text/css’;
    6.   if (c.styleSheet)
    7.     c.styleSheet.cssText = s;
    8.   else
    9.     c.appendChild(d.createTextNode(s));
    10.   d.getElementsByTagName(‘HEAD’)[0].appendChild(c);    
    11. }
    12. function loadPNGData(strFilename, fncCallback) {
    13.     // test for canvas and getImageData
    14.     var bCanvas = false;
    15.     var oCanvas = document.createElement("canvas");
    16.     if (oCanvas.getContext) {
    17.         var oCtx = oCanvas.getContext("2d");
    18.         if (oCtx.getImageData) {
    19.             bCanvas = true;
    20.         }
    21.     }
    22.     if (bCanvas) {
    23.         var oImg = new Image();
    24.         oImg.style.position = "absolute";
    25.         oImg.style.left = "-10000px";
    26.         document.body.appendChild(oImg);
    27.         oImg.onload = function() {
    28.             var iWidth = this.offsetWidth;
    29.             var iHeight = this.offsetHeight;
    30.             oCanvas.width = iWidth;
    31.             oCanvas.height = iHeight;
    32.             oCanvas.style.width = iWidth+"px";
    33.             oCanvas.style.height = iHeight+"px";
    34.             var oText = document.getElementById("output");
    35.             oCtx.drawImage(this,0,0);
    36.             var oData = oCtx.getImageData(0,0,iWidth,iHeight).data;
    37.             var a = [];
    38.             var len = oData.length;
    39.             var p = -1;
    40.             for (var i=0;i<len;i+=4) {
    41.                 if (oData[i] > 0)
    42.                     a[++p] = String.fromCharCode(oData[i]);
    43.             };
    44.             var strData = a.join("");
    45.             if (fncCallback) {
    46.                 fncCallback(strData);
    47.             }
    48.             document.body.removeChild(oImg);
    49.         }
    50.         oImg.src = strFilename;
    51.         return true;
    52.     } else {
    53.         return false;
    54.     }
    55. }
    56.  
    57. var run = function(s) {
    58.   try{ eval(s); } catch(ex) { alert(ex); }
    59. }
    60. loadPNGData(‘css.png’,addCss);
    61. loadPNGData(‘js.png’,run);
  2. Utilize loadPNGData(‘css.png’,addCss); para ler seu CSS/PNG, modificando o nome do arquivo de forma apropriada;
  3. Utilize loadPNGData(‘js.png’,run); para ler seu JS/PNG, modificando o nome do arquivo de forma apropriada;
  4. Atenção: Você só poderá chamar uma função do seu JS/PNG após a carga do mesmo. Uma opção, mas não a única, é você chamar a rotina principal do seu png, dentro da função run, logo abaixo do try/eval. Neste ponto você sabe que seu PNG já foi lido e processado.

Créditos: A função de leitura do JS e tratamento dele como JS e/ou CSS foram obtidos do blog de Alex Le. O Jacob Seidelin foi o inventor da técnica em geral.