基于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 相关文章推荐
尽可能写"友好"的"Javascript"代码
Jan 09 Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 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
微信公众号实现会员卡领取功能
2017/06/08 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
js中style.display=""无效的解决方法
2014/10/30 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
python PyTorch预训练示例
2018/02/11 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
一些Solaris面试题
2015/12/22 面试题
金融专业应届生求职信
2013/11/02 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
2015年财政所工作总结
2015/04/25 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
SpringBoot详解执行过程
2022/07/15 Java/Android