基于JavaScript获取base64图片大小


Posted in Javascript onOctober 18, 2019

base64原理

Base64编码要求把3个8位字节(38=24)转化为4个6位的字节(46=24),之后在6位的前面补两个0,形成8位一个字节的形式。 如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'='

如何获取base64图片大小

通过base64编码原理我们知道,base64的图片字符流中的每8个字符就有两个是用0补充,而且字符流的末尾还可能存在‘='号,我们可以通过这个原理计算图片的文件流大小。

getImgByteSize(data) {
  if (data.graphicContents) { // 获取base64图片byte大小
   const equalIndex = data.graphicContents.indexOf('='); // 获取=号下标
   if (equalIndex > 0) {
    const str = data.graphicContents.substring(0, equalIndex); // 去除=号
    const strLength = str.length;
    const fileLength = strLength - (strLength / 8) * 2; // 真实的图片byte大小
    data.size = Math.floor(fileLength); // 向下取整
   } else {
    const strLength = data.graphicContents.length;
    const fileLength = strLength - (strLength / 8) * 2;
    data.size = Math.floor(fileLength); // 向下取整
   }
  } else {
   data.size = null;
  }
 }

data.graphicContents是后端获取的base64图片的字符串。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
几种tab切换详解
Feb 03 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
JavaScript实现前端倒计时效果
Feb 09 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 Javascript
react MPA 多页配置详解
Oct 18 #Javascript
vue滚动插件better-scroll使用详解
Oct 18 #Javascript
VUE实现密码验证与提示功能
Oct 18 #Javascript
VUE实现图片验证码功能
Nov 18 #Javascript
countUp.js实现数字滚动效果
Oct 18 #Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 #Javascript
细述Javascript的加法运算符的具体使用
Oct 18 #Javascript
You might like
php使用APC实现实时上传进度条功能
2015/10/26 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
javascript+mapbar实现地图定位
2010/04/09 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
python开发中module模块用法实例分析
2015/11/12 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
Django URL参数Template反向解析
2020/11/24 Python
Python绘制数码晶体管日期
2021/02/19 Python
中学生学习生活的自我评价
2013/10/26 职场文书
社会实践活动总结报告
2014/04/29 职场文书
西湖英语导游词
2015/02/06 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android