加密图片本地解密后使用blod文件打开

在日常开发中，我们常常需要对一些文件进行加密，例如：图片等资源。例如: 某书就对一些资源进行了加密，然后通过对应的密钥解密后，然后通过blod打开（blod路径少，base64的路径太长了）。当然，我们在这里也不会对其加密解密进行分析。我们可以学习下加密图片本地解密后转为blod本地路径。

话不多说，直接上思路

1. • 发送请求拉取加密数据

this.$axios({url: this.fileUrl,method: "GET"
}).then(function(e) {// 这里对加密的数据进行解密，具体实现看自己的业务设计const base64 = decryptFn(e); //decryptFn这里就是解密的函数,这里我们可以将其转为base64
}).catch(function(t) {})

2. • base64转为Blob

// 这里用的参数 就是上面解密后的base64文件
dataURLtoBlob(base64) {var base64Arr = base64.split(",");var imgtype = "";var base64String = "";if (base64Arr.length > 1) {//如果是图片base64，去掉头信息base64String = base64Arr[1];imgtype = base64Arr[0].substring(base64Arr[0].indexOf(":") + 1,base64Arr[0].indexOf(";"));}// 将base64解码var bytes = atob(base64String);//var bytes = base64;var bytesCode = new ArrayBuffer(bytes.length);// 转换为类型化数组var byteArray = new Uint8Array(bytesCode);// 将base64转换为ascii码for (var i = 0; i < bytes.length; i++) {byteArray[i] = bytes.charCodeAt(i);}// 生成Blob对象（文件对象）return new Blob([bytesCode], {type: imgtype});
}

3. • 页面使用blob：...来展示图片

// javasctipt
const blob = window.URL.createObjectURL(dataURLtoBlob(base64))// html
<img src=blob/>

4. • 最后效果如下

完结撒花✿✿ヽ(°▽°)ノ✿