获取base64格式的图片大小

//获取base64图片大小,返回kb数字
      showSize(base64url) {
        //把头部去掉
        let str = base64url.replace('data:image/png;base64,', '');
        // 找到等号,把等号也去掉
        let equalIndex = str.indexOf('=');
        if (str.indexOf('=') > 0) {
          str = str.substring(0, equalIndex);
        }
        // 原来的字符流大小,单位为字节
        let strLength = str.length;
        // 计算后得到的文件流大小,单位为字节
        let fileLength = parseInt(strLength - (strLength / 8) * 2);
        // 由字节转换为kb
        let size = "";
        size = (fileLength / 1024).toFixed(2);
        let sizeStr = size + ""; //转成字符串
        let index = sizeStr.indexOf("."); //获取小数点处的索引
        let dou = sizeStr.substr(index + 1, 2) //获取小数点后两位的值
        if (dou == "00") { //判断后两位是否为00,如果是则删除00                
          return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
        }
        return size;
      },

 

### 如何通过前端代码从 Base64 格式的图片中获取其原始文件大小 要从 Base64 编码的图片中提取其原始文件大小,可以通过解析 Base64 字符串的内容长度以及计算未编码前的数据字节数来完成。以下是具体的方法: #### 1. **Base64 数据结构分析** Base64 是一种将二进制数据转换为 ASCII 文本的形式,每 3 个字节被编码为 4 个字符[^2]。因此,在解码过程中,Base64 字符串中的每一个字符实际上代表的是原生二进制数据的一部分。 对于带有 `data:` 协议头的 Base64 图片字符串(例如 `data:image/png;base64,...`),需要先去除协议头部再进行处理。 #### 2. **计算原始文件大小的核心逻辑** 由于 Base64 编码会增加约 33% 的体积(即 `(4/3)` 倍于原始数据量),所以可以通过以下方式反向推算出原始文件大小: - 首先去掉 Base64 字符串中的 `,` 后的部分。 - 统计剩余部分的有效字符数,并忽略填充字符 `=`。 - 使用公式: \[ \text{originalSize} = (\text{有效字符数}) \times (3 / 4) \] #### 3. **实现代码** 下面是一个完整的 JavaScript 实现示例,用于从前端获取 Base64 图片的原始文件大小: ```javascript function getOriginalFileSizeFromBase64(base64Data) { // 移除 data URI 头部 const base64Index = base64Data.indexOf(",") + 1; const pureBase64 = base64Data.substring(base64Index); // 计算有效的 Base64 字符数量(不包括 '=') let padding = 0; // 补充位的数量 if (pureBase64[pureBase64.length - 1] === "=") padding += 1; if (pureBase64[pureBase64.length - 2] === "=") padding += 1; const validCharCount = pureBase64.length - padding; // 转换回原始字节数 const originalSizeInBytes = Math.floor((validCharCount * 3) / 4); return originalSizeInBytes; } // 测试函数 const base64Image = "data:image/jpeg;base64,/9j/4AAQSk..."; // 替换为实际的 Base64 图片字符串 console.log(`原始文件大小: ${getOriginalFileSizeFromBase64(base64Image)} bytes`); ``` 上述代码实现了对 Base64 字符串的解析和还原操作,最终得到原始图像的实际字节大小[^3]。 --- #### 注意事项 - 如果输入的 Base64 字符串不符合标准格式,则可能导致错误的结果。 - 上述方法仅适用于纯 Base64 编码内容;如果存在额外元信息或其他附加字段,则需进一步清理这些无关数据后再执行计算。 --- ### 性能优化建议 当涉及大尺寸图片时,直接加载整个 Base64 字符串可能会占用较多内存资源。此时可以考虑分段读取或者借助 Web Worker 来异步处理以减少主线程压力[^4]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值