澳门金沙vip 10

【澳门金沙vip】用javascript实现base64编码器

获得的结果:
澳门金沙vip 1

原理

  Base-64编码能够将随机大器晚成组字节调换到较长的大面积文本字符体系,从而能够合法地看成首部字段值。Base-64编码将客户输入或二进制数据,打包成豆蔻年华种安全格式,将其看做HTTP首部字段的值发送出去,而无须顾虑里面包罗会毁掉HTTP深入分析程序的冒号、换行符或二进制值

  Base-64编码是用作MIME多媒体电子邮件标准的一片段支出的,那样MIME就足以在不一致的官方电子邮件网关之间传输富文本和大肆的二进制数据了。Base-64编码与将二进制数据文本化表示的uuencode和BinHex标准在真相上很相仿,但空间成效更加高

【拆分】

  Base-64编码将贰个8位字节种类拆散为6位的局地,并为各种6位的局地分配二个字符,这么些字符是Base-64字母表中的六19个字符之朝气蓬勃。那六十几个出口字符都以很司空见惯的,能够安全地坐落HTTP首部字段中。那六14个字符中满含大小写字母、数字、+和/,还使用了出格字符=

下表Base-64的字母表

0   A   8    I   16   Q   24   Y   32   g   40   o   48   w   56   4
1    B    9     J    17    R    25    Z    33    h    41    p    49    x    57    5
2    C    10    K    18    S    26    a    34    i    42    q    50    y    58    6
3    D    11    L    19    T    27    b    35    j    43    r    51    z    59    7
4    E    12    M    20    U    28    c    36    k    44    s    52    0    60    8
5    F    13    N    21    V    29    d    37    l    45    t    53    1    61    9
6    G    14    O    22    W    30    e    38    m    46    u    54    2    62    +
7    H    15    P    23    X    31    f    39    n    47    v    55    3    63    /

  [注意]出于Base64编码用8位字符表示新闻中的6个位,所以Base-64编码字符串大约比原始值扩充了
33%

【编码达成】

  下图是二个粗略的Base-64编码实例。在此边,多少个字符组成的输入值“Ow!”是Base-64编码的,获得的是4个字符的Base-64编码值“T3ch”。它是按以下方法专门的学问的

澳门金沙vip 2

  1、字符串“Ow!”被拆分成3个8位的字节(0x4F、0x77、0x21卡塔尔(قطر‎

  2、那3个字节构成了四个二十二个人的二进制值010011110111011100100001

  3、那几个位被分割为局地6位的类别010011、110111、01110、100001

  4、每一种6位值都意味了从0-63时期的叁个数字,对应Base-64字母表中六贰11个字符之生机勃勃。得到的Base-64编码字符串是个4字符的字符串“T3ch”,然后就能够通过线路将这几个字符串作为“安全的”8位字符传送出来,因为只用了有的
移植性最佳的字符(字母、数字等卡塔尔

【填充】

  Base-64编码收到三个8位字节类别,将以此二进制类别流划分成6位的块。二进制体系有的时候不可能偏巧平均地分为6位的块,在此种景色下,就在类别末尾填充零位,使二进制系列的长度成为24的翻番(6和8的最小公倍数卡塔尔(قطر‎

  对已填写的二进制串进行编码时,任何完全填充(不带有原始数据中的位卡塔尔(قطر‎的6位组都由特别的第六12个暗号“=”表示。若是6位组是有个别填充的,就将填充位设置为0

  下表显示了后生可畏都部队分填写实例

澳门金沙vip 3

  初阶输入字符串“a:a”为3字节(25个人卡塔尔(قطر‎。24是6和8的倍数,因而无需填充,拿到的Base-64编码字符串为“YTph”

  不过,再追加二个字符,输入字符串会成为叁十位长。而6和8的下一个翻番是48,因而要抬高市斤人的填充码。填充的前4位是与数量位混合在联合具名的。得到的6位组01xxxx,会被当做010000、十进制中的16,可能Base-64编码的Q来处理。剩下的八个6位组都以填充码,用“=”表示

  [注意]Base-64编码的法定正规移动至此

 

图表编码

  使用文件File
API的readAsDataU揽胜L(卡塔尔(英语:State of Qatar)方法,能够将文件以多少UGL450I(实行Base64编码卡塔尔(قطر‎格局保留在result属性中

//base64转换函数
function base64(file){
    if(fileData.innerHTML){
        fileData.innerHTML = '';
        btn.style.display = 'none';
    }
    if(file){
        if(/image/.test(file.type)){
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function(){
              fileData.innerHTML = reader.result;
          }          
        }else{
          alert("You must select a valid image file!");
        }
    }    
}

  平时地,生成的Base64编码都比较长,能够扩展三个全选代码的效用

reader.onload = function(){
    fileData.innerHTML = reader.result;
    btn.style.display = 'inline-block';
    btn.onclick = function(){
        fileData.focus();    
        fileData.select();
   }
}     

  能够采纳文件File API选取图片文件

//点击事件替代
targetArea.onclick = function(){file1.click();}
//控件选中
file1.onchange = function(){
    var file = file1.files[0];
    base64(file);    
}

  当然也能够利用原生拖拽,落成图片拖拽,在某些区域呈现Base64编码的机能

targetArea.ondragenter = function(e){this.style.outline = "1px solid black";}
targetArea.ondragleave = function(e){this.style.outline = "";}
//拖拽选中
targetArea.ondrop = function(e){
    e = e || event;
    this.style.outline = "";
    var file = e.dataTransfer.files[0];
    base64(file);
}

  由于File API的包容性约束,以下代码在IE9-浏览器中不或许不荒谬运维

<input id="file1" type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/x-icon"  style="display:none">
<div id="targetArea" style="display:inline-block;vertical-align:middle;height:100px;line-height:50px;width:210px;background:lightblue;">将图片文件拖放到该区域内<br>或者点击该区域选择本地文件</div>
<textarea id="fileData" style="vertical-align:middle;width:400px;height:200px;overflow:auto;word-wrap: break-word;"></textarea>
<button id="btn" style="display:none;position:absolute;margin:220px 0 0 -80px">全选代码</button>
<script>
//base64转换函数
function base64(file){
    if(fileData.innerHTML){
        fileData.innerHTML = '';
        btn.style.display = 'none';
    }
    if(file){
        if(/image/.test(file.type)){
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function(){
              fileData.innerHTML = reader.result;
              btn.style.display = 'inline-block';
              btn.onclick = function(){
                  fileData.focus();    
                  fileData.select();
             }
          }          
        }else{
          alert("You must select a valid image file!");
        }
    }    
}
//点击事件替代
targetArea.onclick = function(){file1.click();}
//控件选中
file1.onchange = function(){
    var file = file1.files[0];
    base64(file);    
}
//兼容事件处理程序
function addEvent(target,type,handler){
    if(target.addEventListener){
        target.addEventListener(type,handler,false);
    }else{
        target.attachEvent('on'+type,function(event){
            return handler.call(target,event);
        });
    }
}
//兼容阻止默认事件
function preventDefault(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}
addEvent(document,'dragover',preventDefault);
addEvent(document,'drop',preventDefault);
addEvent(targetArea,'dragenter',preventDefault);
addEvent(targetArea,'dragover',preventDefault);
addEvent(targetArea,'dragleave',preventDefault);
addEvent(targetArea,'drop',preventDefault);
targetArea.ondragenter = function(e){this.style.outline = "1px solid black";}
targetArea.ondragleave = function(e){this.style.outline = "";}
//拖拽选中
targetArea.ondrop = function(e){
    e = e || event;
    this.style.outline = "";
    var file = e.dataTransfer.files[0];
    base64(file);
}
</script>  

 

字符串编码

  对于字符串来讲,在javaScript中,有2个函数分别用来处掌握码和编码base64字符串:atob(卡塔尔和btoa(卡塔尔(英语:State of Qatar)

  btoa(卡塔尔国函数能够从二进制数据“字符串”创设八个base-64编码的ASCII字符串;相反地,atob(卡塔尔国函数能够解码通过base-64编码的字符串数据。

console.log(btoa('abc'));//'YWJj'
console.log(atob('YWJj'));//'abc'

  [注意]IE9-浏览器不支持

  可是,以上办法有局限性,正是回天乏术调换中文

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

  当时,就要求利用编码方法,先转移为btoa(卡塔尔识其他字符,再张开base64编码,如能够选择encodeUGL450I(卡塔尔(英语:State of Qatar)方法

var str = btoa(encodeURI('小火柴'));
console.log(str);//JUU1JUIwJThGJUU3JTgxJUFCJUU2JTlGJUI0
console.log(decodeURI(atob(str)));//'小火柴'

<p style="margin:0">请在下面的框中输入要转换的字符</p>
<textarea  id="ta" cols="30" rows="10"></textarea>
<button id="btn1">转换</button><button id="btn2">反向转换</button><br>
<p style="margin:0">转换后的字符如下:</p>
<textarea id="result" cols="30" rows="10" readonly></textarea>
<button id="sel">全选</button>
<button id="reset">清空</button>
<script>
reset.onclick = function(){history.go();}
btn1.onclick = function(){result.value = btoa(encodeURI(ta.value));}
btn2.onclick = function(){result.value = decodeURI(atob(ta.value));}
sel.onclick = function(){
    result.focus();
    result.select();
}
</script>

 

其余,你还要创制此外一张表,用来存款和储蓄全数字符串中,分隔符号:
澳门金沙vip 4

应用

  网页上的每八个图形,都供给开销三个http央求下载而来的。所以,才有了雪碧图技术

  无论怎么着,图片的下载始终都要向服务器发出央求,假如图片的下载不用向服务器发出央求,而得以随着HTML的下载同一时间下载到本地那就太好了,而base64恰好能解决那个题目

  后边提到过Base-64编码字符串大概比原始值扩展了33%。所以,不是具有的图片选择base-64编码都适用

  但是,如若图片丰盛小且因为用途的特殊性(如须要平铺等卡塔尔(英语:State of Qatar)不能被构建成7-Up图,在一切网址的复用性超高且基本不会被更新。那么那个时候使用base64编码传输图片就可谓好钢用在刀刃上

  比方,五个独有50字节的2px*2px的背景图。将其转会成base64编码,独有100七个字符,相比较一个http央浼,这种转移无疑更值得保养

  把要转正的图样直接拖入chrome中,使用调整高雄的Source选项,可直接查看图片的base64编码

澳门金沙vip 5

澳门金沙vip 6

前方的话

  base-64作为大面积的编码函数,在着力注脚、摘要认证以至部分HTTP扩大中收获了大气施用。在前者领域,也时有的时候把图片调换为base-64编码在网络中传输。本文将详细介绍base64的法规及用js完毕base64编码器的进度

 

有对象供给一个题目,就是拍卖一张表中某一字段,从那么些字段中去截取内容中最终多个国语词语。

澳门金沙vip 7澳门金沙vip 8

 

 

回去刚才的代码中,大家只管加多黄金时代行代码就可以兑现了我们的渴求:
澳门金沙vip 9

 

OK,那就是落实的整个进度。可是,大家应有不满意上边的代码。既然都选用正则来去除字母,数字,那标点符号能够接纳正则来去除对吧。
由此说,大家不要再次创下造三个表来存款和储蓄标点符号了。

Source Code

 
开创叁个张来存款和储蓄方面包车型客车数码:
澳门金沙vip 10

 

ID SourceText Result
1 张达:U:1杨英苹:U:1,周忱:U:1,;苗桥:U:1,章玮:U:1,; 
2 gaoying,高颖:U; 
3 gaoying,高颖:U; 
4 mq,苗桥;dingjian,丁健:U;zhangwei,章玮;zc,周忱; 
5 xwj,向文杰; 
6 dingjian,丁健; 
7 mq;chendeyong; 
8 gy,郭颖; 
9 houwenjun,侯文君;lj,李军;sunle,孙乐; 
10 dingjian,丁健:U; 
11 dingjian,丁健:U;zhangwei,章玮; 
12 wwm,王文明;zkl,张康亮;jiangyuan,蒋远;fyj,范云军; 
13 dingjian,丁健; 
14 fyj,范云军;wwm,王文明;zkl,张康亮; 
15 lww,陆维巍; 

澳门金沙vip 11澳门金沙vip 12

 

    DECLARE @r INT = 1,@rs INT = 0
    SELECT @rs = MAX([ID]) FROM [dbo].[DataSource]

    WHILE @r <= @rs 
    BEGIN
        DECLARE @Text NVARCHAR(100)
        SELECT @Text = [SourceText] FROM [dbo].[DataSource] WHERE [ID] = @r

         WHILE PATINDEX('%[A-Za-z0-9]%',@Text) > 0     
            SET @Text = STUFF(@Text,PATINDEX('%[A-Za-z0-9]%',@Text),1,' ')          


        DECLARE @x INT = 1,@xs INT = 0
        SELECT @xs = MAX([ID]) FROM [dbo].[Punctuation]

        WHILE @x <= @xs
        BEGIN
            DECLARE @p NVARCHAR(2) 
            SELECT @p = [Name]  FROM [dbo].[Punctuation] WHERE [ID] = @x    
            SET @Text = RTRIM(LTRIM(REPLACE(@Text,@p,' ')))                
            SET @x = @x + 1
        END

        SELECT TOP 1 @Text = [WORD] FROM [dbo].[udf_Split](@Text,' ') WHERE LEN(ISNULL([WORD],''))> 0  ORDER BY [ID] DESC

        UPDATE  [dbo].[DataSource] SET [Result] = @Text  WHERE  [ID] = @r

        SET @r = @r + 1
    END
GO

Source Code