加密图片本地解密后使用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

4. • 最后效果如下

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