基于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中encodeURI和decodeURI方法使用介绍
May 06 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
Vue.js组件props数据验证实现详解
Oct 19 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
javascript条件式访问属性和箭头函数介绍
Nov 17 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
Yii2主题(Theme)用法详解
2016/07/23 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
项目合作计划书
2014/01/09 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
星级党支部申报材料
2014/05/31 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
周年庆典答谢词
2015/01/20 职场文书
会计做账心得体会
2016/01/22 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技