vue3+TypeScript的base64加密和解密

/**
 *base64加解密
 */

 export default class Utils {
    public static readonly Instance: Utils = new Utils();
    private _keyStr: string;
    constructor() {
        this._keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    }

    base64__utf8_encode(e: string) {
        e = e.replace(/rn/g, "n");
        var t = "";
        for (var n = 0; n < e.length; n++) {
            var r = e.charCodeAt(n);
            if (r < 128) {
                t += String.fromCharCode(r);
            } else if (r > 127 && r < 2048) {
                t += String.fromCharCode(r >> 6 | 192);
                t += String.fromCharCode(r & 63 | 128);
            } else {
                t += String.fromCharCode(r >> 12 | 224);
                t += String.fromCharCode(r >> 6 & 63 | 128);
                t += String.fromCharCode(r & 63 | 128);
            }
        }
        return t;
    }

    base64__utf8_decode(e:string) {
        var t = "";
        var n = 0;
        var r = 0;
        var c1 = 0;
        var c2 = 0;
        var c3 = 0;
        while (n < e.length) {
            r = e.charCodeAt(n);
            if (r < 128) {
                t += String.fromCharCode(r);
                n++;
            } else if (r > 191 && r < 224) {
                c2 = e.charCodeAt(n + 1);
                t += String.fromCharCode((r & 31) << 6 | c2 & 63);
                n += 2;
            } else {
                c2 = e.charCodeAt(n + 1);
                c3 = e.charCodeAt(n + 2);
                t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
                n += 3;
            }
        }
        return t;
    }

    base64_encode(e: string) {
        var t = "";
        var n, r, i, s, o, u, a;
        var f = 0;
        e = this.base64__utf8_encode(e);
        while (f < e.length) {
            n = e.charCodeAt(f++);
            r = e.charCodeAt(f++);
            i = e.charCodeAt(f++);
            s = n >> 2;
            o = (n & 3) << 4 | r >> 4;
            u = (r & 15) << 2 | i >> 6;
            a = i & 63;
            if (isNaN(r)) {
                u = a = 64;
            } else if (isNaN(i)) {
                a = 64;
            }
            t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a);
        }
        return t;
    }

    base64_decode(str: string) {
        // Going backwards: from bytestream, to percent-encoding, to original string.
        return decodeURIComponent(atob(str).split('').map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));
    }
}

Vue 3 中使用 TypeScript,可以通过在组件中定义一个方法来将 base64 转为图片。同时,可以使用 `ref` 来获取 `img` 标签的 DOM 对象,并将其赋值给 `src` 属性。 以下是 TypeScript 示例代码: ```typescript <template> <div> <img ref="image" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const image = ref<HTMLImageElement | null>(null); function base64ToImage(base64: string): void { const binaryStr = atob(base64); const len = binaryStr.length; const bytes = new Uint8Array(len); for (let i = 0; i < len; i++) { bytes[i] = binaryStr.charCodeAt(i); } const imageBlob = new Blob([bytes], { type: 'image/jpeg' }); const imageUrl = URL.createObjectURL(imageBlob); image.value!.src = imageUrl; } // 在 mounted 钩子中调用 base64ToImage 方法 // 以下示例中 base64Str 是一个 base64 编码的图片字符串 import { onMounted } from 'vue'; onMounted(() => { const base64Str = 'data:image/jpeg;base64,/9j/4AAQSkZJRgA...'; base64ToImage(base64Str); }); return { image }; } }); </script> ``` 在上面的代码中,使用了 `ref` 来获取 `img` 标签的 DOM 对象,并将其赋值给 `image` 变量。然后在 `base64ToImage` 方法中,将 base64 编码解码为二进制数据,再将其转化为 Blob 对象,最后用 URL.createObjectURL() 方法创建一个 URL,将其赋值给 `img` 标签的 `src` 属性。 在 `mounted` 钩子中调用 `base64ToImage` 方法,将 base64 编码的图片字符串作为参数传递给它即可。请注意,这里的 `base64Str` 只是一个示例,实际使用时应该替换为真实的 base64 字符串。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值