2010-09-23 35 views
20

Estoy tratando de implementar un script simple en un sitio que devolverá la información codificada en base64 de la API de Ajax de google. Esto es lo que yo estoy jugando con hasta ahora:Cómo base64 codificar dentro de javascript

<html> 
<head> 
<script src="http://www.google.com/jsapi?key=ABQIAAAA0duujonFsEX871htGWZBHRS76H0qhS7Lb-D1Gd0Mnaiuid8Z7BQIyz2kMpojKizoyiCQA4yRkKAKug" type="text/javascript"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    jQuery(document).ready(function() { 
    var location = 'Unable to determine your location.'; 
    if (google.loader.ClientLocation) { 
     var loc = google.loader.ClientLocation; 
     location = 'Country: <strong>' + loc.address.country + '</strong>, Region: <strong>' + loc.address.region + '</strong>, City: <strong>' + 
       loc.address.city + '</strong>, Lat/Long: <strong>' + loc.latitude + ', ' + loc.longitude + '</strong>'; 
    } 
    jQuery('.geolocation').html(location); 
    }); 
</script> 
</head> 
<body> 
<span class="geolocation"></span> 
</body> 
</html> 

devuelve la información que estoy tratando de conseguir correctamente, pero necesito base64 codifican las partes separadas como país, región, ciudad, latitud y longitud. En php sería simple, pero no puedo encontrar la forma de hacerlo en javascript. Cualquier ayuda sería apreciada.

+1

posible duplicado de [¿Cómo se puede codificar a Base64 usando Javascript?] (Http://stackoverflow.com/questions/246801/how-can-you-encode-to-base64-using-javascript) –

Respuesta

15

This answer parece coincidir con lo que estás buscando.

También hay this one que es más elegante:

/** 
* 
* Base64 encode/decode 
* http://www.webtoolkit.info/ 
* 
**/ 

var Base64 = { 

    // private property 
    _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/=", 

    // public method for encoding 
    encode : function (input) { 
     var output = ""; 
     var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 
     var i = 0; 

     input = Base64._utf8_encode(input); 

     while (i < input.length) { 

      chr1 = input.charCodeAt(i++); 
      chr2 = input.charCodeAt(i++); 
      chr3 = input.charCodeAt(i++); 

      enc1 = chr1 >> 2; 
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 
      enc4 = chr3 & 63; 

      if (isNaN(chr2)) { 
       enc3 = enc4 = 64; 
      } else if (isNaN(chr3)) { 
       enc4 = 64; 
      } 

      output = output + 
      this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + 
      this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4); 

     } 

     return output; 
    }, 

    // public method for decoding 
    decode : function (input) { 
     var output = ""; 
     var chr1, chr2, chr3; 
     var enc1, enc2, enc3, enc4; 
     var i = 0; 

     input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); 

     while (i < input.length) { 

      enc1 = this._keyStr.indexOf(input.charAt(i++)); 
      enc2 = this._keyStr.indexOf(input.charAt(i++)); 
      enc3 = this._keyStr.indexOf(input.charAt(i++)); 
      enc4 = this._keyStr.indexOf(input.charAt(i++)); 

      chr1 = (enc1 << 2) | (enc2 >> 4); 
      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); 
      chr3 = ((enc3 & 3) << 6) | enc4; 

      output = output + String.fromCharCode(chr1); 

      if (enc3 != 64) { 
       output = output + String.fromCharCode(chr2); 
      } 
      if (enc4 != 64) { 
       output = output + String.fromCharCode(chr3); 
      } 

     } 

     output = Base64._utf8_decode(output); 

     return output; 

    }, 

    // private method for UTF-8 encoding 
    _utf8_encode : function (string) { 
     string = string.replace(/\r\n/g,"\n"); 
     var utftext = ""; 

     for (var n = 0; n < string.length; n++) { 

      var c = string.charCodeAt(n); 

      if (c < 128) { 
       utftext += String.fromCharCode(c); 
      } 
      else if((c > 127) && (c < 2048)) { 
       utftext += String.fromCharCode((c >> 6) | 192); 
       utftext += String.fromCharCode((c & 63) | 128); 
      } 
      else { 
       utftext += String.fromCharCode((c >> 12) | 224); 
       utftext += String.fromCharCode(((c >> 6) & 63) | 128); 
       utftext += String.fromCharCode((c & 63) | 128); 
      } 

     } 

     return utftext; 
    }, 

    // private method for UTF-8 decoding 
    _utf8_decode : function (utftext) { 
     var string = ""; 
     var i = 0; 
     var c = c1 = c2 = 0; 

     while (i < utftext.length) { 

      c = utftext.charCodeAt(i); 

      if (c < 128) { 
       string += String.fromCharCode(c); 
       i++; 
      } 
      else if((c > 191) && (c < 224)) { 
       c2 = utftext.charCodeAt(i+1); 
       string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); 
       i += 2; 
      } 
      else { 
       c2 = utftext.charCodeAt(i+1); 
       c3 = utftext.charCodeAt(i+2); 
       string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); 
       i += 3; 
      } 

     } 

     return string; 
    } 

} 
+0

Eso se ve prometedor, pero está un poco fuera de mi alcance en javascript. Tal vez pueda encontrar una manera de hacer todo esto en php en su lugar – Mike

+0

revisar comentarios [aquí] (http://stackoverflow.com/a/246813/5090771) antes de usar ... – WhiteHat

20

Mozilla, WebKit y Opera todos tienen btoa() y atob() funciones para la base 64 de codificación y decodificación, respectivamente. Úselos cuando sea posible, ya que es casi seguro que serán mucho más rápidos que una implementación de JavaScript y recurran a uno de los muchos scripts que aparecen al hacer a web search.

EDIT 10 DE SEPTIEMBRE DE 2013: atob() y btoa() no manejan caracteres Unicode fuera del rango ASCII. MDN tiene workarounds pero no puedo responder por ellos. Gracias a @larspars por señalar esto.

Por ejemplo, si estuviera usando el ejemplo de la respuesta de amphetamachine, se puede hacer lo siguiente:

if (!window.btoa) { 
    window.btoa = function(str) { 
     return Base64.encode(str); 
    } 
} 

if (!window.atob) { 
    window.atob = function(str) { 
     return Base64.decode(str); 
    } 
} 

alert(btoa("Some text")); 
+1

Tenga en cuenta que atob y btoa no manejarán unicode , mientras que la respuesta de @ amphetamachine lo hará. Base64.encode ('☃') funciona, mientras que btoa ('☃') arroja un error (probado en Firefox, Chrome y Opera) – larspars

+0

Aún tengo dudas sobre si usarlo, pero por ahora creo que lo haré. No tenemos caracteres extraños ya que estamos trabajando con el idioma holandés. Gracias por publicarlo y editar su comentario, ¡esto ayudó mucho a la hora de decidir! ;) – ReSpawN

0

que tienen parte del código de la respuesta aquí:

https://scotch.io/quick-tips/how-to-encode-and-decode-strings-with-base64-in-javascript

y la otra parte de la respuesta en esta página: https://stackoverflow.com/a/3776796/2655623

y aquí está el resultado:

var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}} 

window.btoa = function(str) { 
    return Base64.encode(str); 
} 

window.atob = function(str) { 
    return Base64.decode(str); 
} 

Como este mantener todo en un solo lugar, no voy a involucrarme con la forma window.atb/window.btoa actuar diferente en distintos navegadores.

0

IE 10 & arriba y toda la última versión del navegador

Codificar cadena

var str = "raj"; 
var enc = window.btoa(str); // cmFq 

Decode cadena

var dec = window.atoa('cmFq'); // raj 

O de lo contrario podría tener su propia función en la página. small blog with references

Cuestiones relacionadas