网站建设最新,织梦网站安全,建设网上商城网站,单页面推广网站我们的图片大部分都是可以转换成base64编码的data#xff1a;image。 这个在将canvas保存为img的时候尤其有用。虽然除ie外#xff0c;大部分现代浏览器都已经支持原生的基于base64的encode和decode#xff0c;例如btoa和atob。#xff08;将canvas画布保存成img并强制改变…我们的图片大部分都是可以转换成base64编码的dataimage。 这个在将canvas保存为img的时候尤其有用。虽然除ie外大部分现代浏览器都已经支持原生的基于base64的encode和decode例如btoa和atob。将canvas画布保存成img并强制改变mimetype进行下载会在下一篇记录 但是处于好奇心还是驱使我去了解下base64编码的原理。以便也在不支持原生base64编码的ie下可以得以实现。 【Base64】-base64的编码都是按字符串长度以每3个8bit的字符为一组-然后针对每组首先获取每个字符的ASCII编码-然后将ASCII编码转换成8bit的二进制得到一组3*824bit的字节-然后再将这24bit划分为4个6bit的字节并在每个6bit的字节前面都填两个高位0得到4个8bit的字节-然后将这4个8bit的字节转换成10进制对照Base64编码表 下表得到对应编码后的字符。 注1. 要求被编码字符是8bit的所以须在ASCII编码范围内\u0000-\u00ff中文就不行。 2. 如果被编码字符长度不是3的倍数的时候则都用0代替对应的输出字符为 Base64 编码表ValueChar ValueChar ValueChar ValueChar0A16Q32g48w1B17R33h49x2C18S34i50y3D19T35j51z4E20U36k5205F21V37l5316G22W38m5427H23X39n5538I24Y40o5649J25Z41p57510K26a42q58611L27b43r59712M28c44s60813N29d45t61914O30e46u6215P31f47v63/比如举下面2个例子a) 字符长度为能被3整除时比如“Tom” T o mASCII: 84 111 1098bit字节: 01010100 01101111 011011016bit字节: 010101 000110 111101 101101十进制: 21 6 61 45对应编码: V G 9 t 所以btoa(Tom) VG9t b) 字符串长度不能被3整除时比如“Lucy” L u c yASCII: 76 117 99 1218bit字节: 01001100 01110101 01100011 01111001 00000000 000000006bit字节: 010011 000111 010101 100011 011110 010000 000000 000000十进制: 19 7 21 35 30 16 (异常) (异常) 对应编码: T H V j e Q 由于Lucy只有4个字母所以按3个一组的话第二组还有两个空位所以需要用0来补齐。这里就需要注意因为是需要补齐而出现的0所以转化成十进制的时候就不能按常规用base64编码表来对应所以不是a 可以理解成为一种特殊的“异常”编码应该对应“”。 有了上面的理论那我们实现一个base64编码就容易了。 /** * base64 encoding decoding * for fixing browsers which dont support Base64 | btoa |atob*/(function (win, undefined) {var Base64 function () {var base64hash ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789/;// btoa method function _btoa (s) {if (/([^\u0000-\u00ff])/.test(s)) {throw new Error(INVALID_CHARACTER_ERR); } var i 0, prev, ascii, mod, result [];while (i s.length) { ascii s.charCodeAt(i); mod i % 3;switch(mod) {// 第一个6位只需要让8位二进制右移两位 case 0: result.push(base64hash.charAt(ascii 2));break;//第二个6位 第一个8位的后两位 第二个8位的前4位 case 1: result.push(base64hash.charAt((prev 3) 4 | (ascii 4)));break;//第三个6位 第二个8位的后4位 第三个8位的前2位 //第4个6位 第三个8位的后6位 case 2: result.push(base64hash.charAt((prev 0x0f) 2 | (ascii 6))); result.push(base64hash.charAt(ascii 0x3f));break; } prev ascii; i ; }// 循环结束后看mod, 为0 证明需补3个6位第一个为最后一个8位的最后两位后面补4个0。另外两个6位对应的是异常的“” // mod为1证明还需补两个6位一个是最后一个8位的后4位补两个0另一个对应异常的“” if(mod 0) { result.push(base64hash.charAt((prev 3) 4)); result.push(); } else if (mod 1) { result.push(base64hash.charAt((prev 0x0f) 2)); result.push(); }return result.join(); }// atob method // 逆转encode的思路即可 function _atob (s) { s s.replace(/\s|/g, );var cur, prev, mod, i 0, result [];while (i s.length) { cur base64hash.indexOf(s.charAt(i)); mod i % 4;switch (mod) {case 0://TODO break;case 1: result.push(String.fromCharCode(prev 2 | cur 4));break;case 2: result.push(String.fromCharCode((prev 0x0f) 4 | cur 2));break;case 3: result.push(String.fromCharCode((prev 3) 6 | cur));break; } prev cur; i ; }return result.join(); }return { btoa: _btoa, atob: _atob, encode: _btoa, decode: _atob }; }();if (!win.Base64) { win.Base64 Base64 }if (!win.btoa) { win.btoa Base64.btoa }if (!win.atob) { win.atob Base64.atob } })(window) Base64 example 转载于:https://www.cnblogs.com/hongru/archive/2012/01/14/2321397.html
