基于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 concat数组累加 示例
Sep 03 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
vue下载excel的实现代码后台用post方法
May 10 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中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
python实现C4.5决策树算法
2018/08/29 Python
对Python中plt的画图函数详解
2018/11/07 Python
对python中的argv和argc使用详解
2018/12/15 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
学年自我鉴定范文
2013/10/01 职场文书
会计求职信范文
2014/05/24 职场文书
财务整改报告范文
2014/11/05 职场文书
计划生育汇报材料
2014/12/26 职场文书
旅行社计调工作总结
2015/08/12 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技