【base64】JavaScript&uniapp 将图片转为base64并展示

Base64是一种用于编码二进制数据的方法，它将二进制数据转换为文本字符串。它的主要目的是在网络传输或存储过程中，通过将二进制数据转换为可打印字符的形式进行传输

JavaScript

压缩图片

    
    

    压缩后的图片：

    
    

 图片大小从1.36MB到169kb

加密图片

上面的代码中，toDataURL产生的是图片的base64编码，Base64编码必须是完整且正确才能正常显示图片。而只需对此编码做小小修改，哪怕仅是改动一个字符，也会让图片无法正常显示

代码如下：

    
    

    压缩后的图片：

    
    点此解密并显示图片
    

 

虽然图片编码经过了加密，而且增加了口令保护，但是只要查看网页源码，就可以知道口令，这样完全没有起到加密的效果

js代码加密

JS加密、JS混淆 - JShaman：专业JS代码混淆加密平台

直接将加密后的代码替换成以前的代码即可，如下：

uniapp 

 效果图：

 编码：

注解：

_this.base64Image = "data:image/jpeg;base64," + data.data表示什么？

this.base64Image是一个用于在视图中展示图片的数据绑定。通过给this.base64Image赋值一个以"data:image/jpeg;base64,"开头的字符串，然后将Base64编码的图片数据拼接在后面，就可以将这个Base64格式的图片数据作为URL来展示在页面上

uni.chooseImage？

从本地相册选择图片或使用相机拍照

文档：uni.chooseImage(OBJECT) | uni-app官网

uni.getFileSystemManager().readFile({})?

使用uni-app中FileSystemManager的readFile方法读取文件

文档：uni.getFileSystemManager() | uni-app官网

filePath（必填）：要读取的文件路径，可以是相对路径或绝对路径。

encoding（可选）：文件的编码格式，默认值为 'utf8'。如果需要将文件内容转换为 Base64 格式，则需要将该值设置为 'base64'。

success（可选）：文件读取成功后的回调函数，接收一个参数表示读取到的文件数据。

fail（可选）：文件读取失败时的回调函数，接收一个参数表示错误信息。