base64加密及方式

一、base64编码

base64编码原理

目的:出于数据加密的目的或者网络协议的限制或者特殊字符的处理等,通常需要将原文转换为base64编码,比如:前台传递的SQL、特殊参数、发送某些含有 ASCII 码表中 0 到 31 之间的控制字符的数据。

二、使用方式

1.直接应用js-base64库(推荐)

(1)安装依赖
  • Js中安装依赖
//方式一	:
	//1.手动下载依赖包
	//2.直接引入,例如:
	<script src="base64.js"></script>
//方式二:直接从官网引入
<script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.min.js"></script>

  • ES6中安装依赖
//安装依赖
//方式一(推荐)
npm install --save js-base64
//方式二
npm install base-64 --save
//方式三
yarn add base-64


(2)引入依赖
  • ES6
import { Base64 } from 'js-base64';
//或者
// or if you prefer no Base64 namespace
import { encode, decode } from 'js-base64';


  • node.js (commonjs)
const {Base64} = require('js-base64');
//您还可以使用ESM来import代替require
require=require('esm')(module);
import {Base64} from 'js-base64';


(3).使用案例
  • 概要
let latin = 'dankogai';
let utf8  = '小飼弾'
let u8s   =  new Uint8Array([100,97,110,107,111,103,97,105]);

//1.加密

Base64.encode(latin);             // ZGFua29nYWk=
Base64.encode(latin, true));      // ZGFua29nYWk 跳过填充
Base64.encodeURI(latin));         // ZGFua29nYWk
Base64.btoa(latin);               // ZGFua29nYWk=
Base64.btoa(utf8);                // 引发异常
Base64.fromUint8Array(u8s);       //  ZGFua29nYWk=
Base64.fromUint8Array(u8s, true); // ZGFua29nYW 这是 URI 安全的
Base64.encode(utf8);              // 5bCP6aO85by+
Base64.encode(utf8, true)         // 5bCP6aO85by-
Base64.encodeURI(utf8);           // 5bCP6aO85by-

//2.解密
Base64.decode(      'ZGFua29nYWk=');// dankogai
Base64.decode(      'ZGFua29nYWk'); // dankogai
Base64.atob(        'ZGFua29nYWk=');// dankogai
Base64.atob(        '5bCP6aO85by+');// 'å°�飼弾'  这是无意义的
Base64.toUint8Array('ZGFua29nYWk=');// u8s above
Base64.decode(      '5bCP6aO85by+');// 小飼弾
// note .decodeURI() is unnecessary since it accepts both flavors ==> 注意 .decodeURI() 是不必要的
Base64.decode(      '5bCP6aO85by-');// 小飼弾


  • 内置扩展
// you have to explicitly extend String.prototype
Base64.extendString();
// once extended, you can do the following
'dankogai'.toBase64();        // ZGFua29nYWk=
'小飼弾'.toBase64();           // 5bCP6aO85by+
'小飼弾'.toBase64(true);       // 5bCP6aO85by-
'小飼弾'.toBase64URI();        // 5bCP6aO85by- ab alias of .toBase64(true)
'小飼弾'.toBase64URL();        // 5bCP6aO85by- an alias of .toBase64URI()
'ZGFua29nYWk='.fromBase64();  // dankogai
'5bCP6aO85by+'.fromBase64();  // 小飼弾
'5bCP6aO85by-'.fromBase64();  // 小飼弾
'5bCP6aO85by-'.toUint8Array();// u8s above

// 你必须显式地扩展 Uint8Array.prototype
Base64.extendUint8Array();
// 一旦扩展,您可以执行以下
u8s.toBase64();     // 'ZGFua29nYWk='
u8s.toBase64URI();  // 'ZGFua29nYWk'
u8s.toBase64URL();  // 'ZGFua29nYWk' an alias of .toBase64URI()

Base64.toBase64(str);

// 一次性扩展所有
Base64.extendBuiltins()

  • decode() vs .atob (and .encode() vs btoa())
    假设你有:
var pngBase64 = 
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
  • 这是 Base64 编码的 1x1 透明 PNG,请勿使用 Base64.decode(pngBase64). 使用Base64.atob(pngBase64)来代替。 Base64.decode()解码为 UTF-8 字符串,同时Base64.atob()解码为字节,这与浏览器内置兼容atob()(node.js 中不存在)。相同的规则适用于相反的方向。

  • 或者甚至更好,Base64.toUint8Array(pngBase64)。

可参考:快速通道

2.直接使用window.btoa() 编码,使用window.atob() 解码

案例:
在这里插入图片描述

注意:此方式只支持ASCII 编码 ,如果编码中有中文或者sql中的特殊字符等则会报错:The string to be encoded contains characters outside of the Latin1 range…

如果要对中文进行编码转换,需要通过如下方式进行

//编码
window.btoa(unescape(encodeURIComponent('个人个人个人和')))
//解码
decodeURIComponent(escape(window.atob('5Liq5Lq65Liq5Lq65Liq5Lq65ZKM'))))

在这里插入图片描述

三 JS base64和图片 相互转换

案例参考

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值