base64图片的大小计算及获取原图字节大小

Thu, 10 Jul 2025 11:52:40 +0000

实现原理：根据base64,做区分，前面部分是类型，后面部分是真实的的图片字符串

比如下面的base64图片字符串

// 这里只是做了一个例子

var base64DataStr = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABNoAAAigCAY ... pw52VLv8/zk3Uc3CN6sgAAAAASUVORK5CYII=';

function getBase64ImgSize(base64DataStr) {
 var tag = "base64,";
 var base64Data = '';

 // 截取字符串 获取"base64,"后面的字符串
 base64DataStr = base64Data = base64DataStr.substring(base64DataStr.indexOf(tag) + tag.length);

 // 根据末尾等号（'='）来再次确认真实base64图片字符串
 var eqTagIndex = base64DataStr.indexOf("=");
 base64DataStr = eqTagIndex != -1 ? base64DataStr.substring(0, eqTagIndex) : base64DataStr;

 // 计算大小
 var strLen = base64DataStr.length;
 var fileSize = strLen - (strLen / 8) * 2; // 这里的原理可以想一下为什么要这样做
 return {
 fileSize: fileSize,
 base64Data: base64Data,
 };
}

使用方式如下

getBase64ImgSize(base64DataStr)

运行后得到的结果

{fileSize: 57, base64Data: "iVBORw0KGgoAAAANSUhEUgAABNoAAAigCAY ... pw52VLv8/zk3Uc3CN6sgAAAAASUVORK5CYII="}

七牛（Qiniu）base64图片上传

Thu, 10 Jul 2025 11:52:37 +0000

参考函数如下

实现原理，将base64图片进行分割，取出图片真实的字符串，并获取这个真实图片串的大小，然后提交到七牛

// 上传图片token
var uploadToken = 'xxxxx';

function putb64(base64Data, uploadKey, callback){
 // 原始base64图片数据处理 返回一个 真实图片数据大小值 和 真实图片数据值
 var imgSizeData = this.getBase64ImgSize(base64Data); // - 解释1

 // 获取大小
 var len = parseInt(imgSizeData.fileSize, 10);

 var data = imgSizeData.base64Data;

 // key的base64处理
 var key = this.base64Key(uploadKey); // - 解释2

 // 请求地址拼接 - 注意这里的http 如果网站是https的话换成https 不然在客户端尤其是iOS 端会出现异常
 var url = "http://upload.qiniup.com/putb64/"+len+'/key/'+key;

 // 七牛cdn绑定的域名
 var domain = 'https://xx.com';

 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange=function(){
 if (xhr.readyState==4){
 // json 解析
 var data = JSON.parse(xhr.responseText);

 // 将代码拼接后返回给程序调用
 callback(domain + '/' + data.key);
 return true;
 }
 }
 xhr.open("POST", url, true);

 // 请求头信息设置
 xhr.setRequestHeader("Content-Type", "application/octet-stream");
 xhr.setRequestHeader("Authorization", "UpToken " + uploadToken + "");

 // 提交数据
 xhr.send(data);
}

官方参考: https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code

解释1 - 请参考 base64图片的大小计算及获取原图字节大小

解释2 - 请参考 javascript的base64实现及使用

Base64 on Dapeng Zhang

base64图片的大小计算及获取原图字节大小

七牛（Qiniu）base64图片上传