javascript自带base64位加解密：
加密：window.btoa("test")； //"dGVzdA=="
解密：window.atob("dGVzdA=="); //"test"
近期在工作中遇到很经典的问题，关于前端加密后端解密，我只用了一种通用的Base64加密方式，关于前端加密方式我使用的是Base64插件
具体可以去下载Base64.js
前端加解密：
首先在html中引入jquery的js插件和base64js插件，然后编辑被加密数据
<script type="text/javascript" src="js/base64.js"></script>
var str="abcd1234";
alert("加密前："+str);
var base = new Base64();
var encodeStr=base.encode(str);
alert("加密后："+encodeStr);
var decodeStr=base.decode(encodeStr);
alert("解密后："+decodeStr)
下面是处理结果：
image
image
image
获取url中的参数值
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
}
//获取url中字段为gh的value值
var gh = getUrlParam('gh');
图片的base64编码
图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。
这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个http请求下载而来的（所有才有了csssprites技术的应运而生，但是csssprites有自身的局限性，下文会提到）。
没错，不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而base64正好能解决这个问题。
为什么要使用Base64编码？
那么为什么要使用base64:URL传输图片文件？上文也有提及，因为这样可以节省一个http请求。图片的base64编码可以算是前端优化的一环。效益虽小，但却缺能积少成多。
说到这里，不得不提的是CssSprites技术，后者也是为了减少http请求，而将页面中许多细小的图片合并为一张大图。那么图片的base64编码和CssSprites有什么异同，又该如何取舍呢？
所以，在这里要明确使用base64的一个前提，那就是被base64编码的图片足够尺寸小。以博客园的logo为例：
如下图所示，博客园的Logo只有3.27KB，已经很小了，但是如果将其制作转化成base64编码，生成的base64字符串编码足足有4406个。即便base64编码能够被gzip压缩，压缩率能达到50%以上，想象一下，一个元素的css样式编写居然超过了2000个字符，那对css整体的可读性将会造成十分大的影响，代码的冗余使得在此使用base64编码将得不偿失。
那么，是不是表示base64编码无用武之地呢？不然。当页面中的图片满足以下要求，base64就能大显生手。
如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新。那么此时使用base64编码传输图片就可谓好钢用在刀刃上，思前想后，符合这个规则的，有一个是我们经常会遇到的，就是页面的背景图background-image。在很多地方，我们会制作一个很小的图片大概是几px*几px，然后平铺它页面当背景图。因为是背景图的缘故，所以无法将它放入雪碧图，而它却存在网站的很多页面，这种图片往往只有几十字节，却需要一个http请求，十分不值得。那么此时将它转化为base64编码，何乐而不为？
下面是一个只有50字节的2*2的的背景图。将其转化成base64编码，只有100多个字符，相比一个http请求，这种转换无疑更值得推崇。
CssSprites VS Base64编码
简单陈述一下我对何时这使用这两种优化方法的看法。
使用CssSprites合并为一张大图：
- 页面具有多种风格，需要换肤功能，可使用CssSprites
- 网站已经趋于完美，不会再三天两头的改动（例如button大小、颜色等）
- 使用时无需重复图形内容
- 没有base64编码成本，降低图片更新的维护难度。（但注意Sprites同时修改- css和图片某些时候可能造成负担）
使用base64直接把图片编码成字符串写入CSS文件：
- 无额外请求
- 对于极小或者极简单图片来
- 可以被gzip。（通过gzip对base64数据的压缩能力通常和图片文件差不多或者更强）
- 降低css维护难度
- 可像单独图片一样使用，比如背景图片重复使用等
- 没有跨域问题，无需考虑缓存、文件头或者cookies问题
- 更便捷的将图片转化为Base64编码
将图片转化为base64编码有许多工具，例如本文中我所使用的http://www.pjhome.net/web/html5/encodeDataUrl.htm，但是很多这些网站是国外网站，经常被墙登陆不了。这里介绍一个更为快捷的方法，就是利用Chrome浏览器，在chrome下新建一个窗口，然后把要转化的图片直接拖入浏览器，打开控制台，点Source，如下图所示，点击图片，右侧就会显示该图片的base64编码，是不是很方便。
网友评论