基于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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
js简单时间比较的方法
Aug 02 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 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连接access数据库
2008/03/27 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python3学习urllib的使用方法示例
2017/11/29 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
python的命名规则知识点总结
2019/10/04 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
致短跑运动员广播稿
2014/01/09 职场文书
运动会通讯稿400字
2014/01/28 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
民间借贷协议书范本
2014/10/01 职场文书
身份证丢失证明
2015/06/19 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL