基于JavaScript获取base64图片大小

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图片的字符串。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现把图片的绝对路径转为base64字符串、blob对象再上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: 使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码. 具体用法: 在这我们引用淘宝服务器上的一张图片举例: var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.j

  • js 图片转base64的方式(两种)

    方式一:Blob和FileReader 对象 实现原理: 使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"] 使用FileReader 对象接收blob <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&quo

  • JavaScript Base64 作为文件上传的实例代码解析

    例如我们用某些 裁剪插件 得到的图片是 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406

  • JS实现的base64加密解密操作示例

    JS实现的base64加密解密操作示例

    本文实例讲述了JS实现的base64加密解密操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js base64加密解密</title> </head> <body> <script> // 创建Base64对象 var Base64 = { _keyStr: &qu

  • JS实现的3des+base64加密解密算法完整示例

    JS实现的3des+base64加密解密算法完整示例

    本文实例讲述了JS实现的3des+base64加密解密算法.分享给大家供大家参考,具体如下: 1. index.html: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>www.jb51.net BASE64编码</title> <meta http-equiv="Content-Type" content="text/html; c

  • JavaScript BASE64算法实现(完美解决中文乱码)

    JavaScript 的 BASE64 算法 var BASE64={ enKey: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/', deKey: new Array( -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -

  • JS加密插件CryptoJS实现的Base64加密示例

    本文实例讲述了JS加密插件CryptoJS实现的Base64加密.分享给大家供大家参考,具体如下: 前面一篇<JS加密插件CryptoJS实现的DES加密>介绍了CryptoJS插件进行DES加密操作的方法,这里再来介绍一下CryptoJS进行base64加密的方法: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

  • 基于JavaScript获取base64图片大小

    base64原理 Base64编码要求把3个8位字节(38=24)转化为4个6位的字节(46=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'=' 如何获取base64图片大小 通过base64编码原理我们知道,base64的图片字符流中的每8个字符就有两个是用0补充,而且字符流的末尾还可能存在'='号,我们可以通过这个原理计算图片的文件流大小. getImgByteSize(da

  • 基于JavaScript获取鼠标位置的各种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容 鼠标点击位置坐标 相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致. functi

  • JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

    之前为了拍摄照片使用了webcam相关的插件,其拍摄后得到的是base64格式的图片,直接显示没问题,在src中直接指定就可以了,但是要上传到server时问题就来了,server端接收的是标准的文件,也就是html form中type="file"的形式.想要沿用这个接口不更改server端代码,于是尝试将base64直接转换成标准的fomeData并通过AJAX提交. 第一步,将base64转换成二进制图片(Blob) 主要思路是整理一下base64的前面几个字符,预处理以后转换成

  • python获取远程图片大小和尺寸的方法

    本文实例讲述了python获取远程图片大小和尺寸的方法.分享给大家供大家参考.具体分析如下: 这段代码通过urllib2打开远程图片,通过cStringIO读取文件内容,不用保存到磁盘即可读取图片文件的信息 #!/usr/bin/env python #encoding=utf-8 import cStringIO, urllib2, Image url = 'http://www.jb51.net/images/logo.gif' file = urllib2.urlopen(url) tmp

  • 基于JavaScript编写一个图片转PDF转换器

    基于JavaScript编写一个图片转PDF转换器

    目录 JavaScript 实现图片转 PDF 第一步: PDF Converter的基本结构 第二步: 图片预览框 第 3 步: 图像到 PDF 转换器的按钮 第 4 步: 在 JavaScript 中实现图片转换到 PDF 这是一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件.你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件.但是除了图片之外,其他文件不可以在此处转换为 PDF.我使用 HTML 添加了不同的元素并创建了一个输入框来选择图像. 我们

  • php查看请求头信息获取远程图片大小的方法分享

    如果要获取远程图片的大小,一种普遍的做法是先将远程图片的内容获取回来,再用strlen计算长度,这种方法需要将图片下载下来,然后才能计算.如果图片很大的话,那么网络传输就要花费不少时间,效率显然低下.笔者提供一个方法来提高效率,主要是利用http的头信息. 当访问网页的时候,服务器会返回请求的头信息,其中Content-Length表示请求的网页内容大小.如果请求的是图片,那么Content-Length就表示图片的大小.根据这个,只需要发送head请求获取返回的头信息就OK了.在php中,可以

  • JavaScript 动态改变图片大小

    最近由于项目需要,在实现图片的时候,若图片大于100 X 100,则将其缩小为 100 X 100,若比这个小,则保持原图大小.经过研究发现,可以用Javascript代码简单实现. Javascript代码: 复制代码 代码如下: <script> function resizeImage(obj){if(obj.height>100)obj.height=100;if(obj.width>100)obj.width=100; } </script> 页面代码: 复制

  • 基于javascript数组实现图片轮播

    图片轮播的办法有多种,在这里介绍一种简单的:js数组实现. 首先将图片路径存储在数组中,然后再调用setInterval函数来依次轮播图片 <script type="text/javascript"> var curIndex = 0; var timeInterval = 1000; var arr = new Array(); arr[0] = "1.png"; arr[1] = "2.png"; arr[2] = "

  • 基于JavaScript获取url参数2种方法

    这次是使用JavaScript来获取url(request)中的参数 在日常页面编写的过程中为了方便操作在<script>中通过使用window.location.href="要跳转的页面?参数1=" rel="external nofollow" +值1+"&参数2="+值2 来进行页面跳转并传值. 那么在跳转过去的页面怎样在<script>中获取到传过来的参数呢? 下面是小编的一个案例: //参数传出页面 wi

  • 基于JavaScript实现本地图片预览

    基于JavaScript实现本地图片预览

    本文实例为大家分享了js本地图片预览的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <!-- <!DOCTYPE html>一定要放在第一行,除非上面都是空行 在HTML规范中,单独存在的标签是不需要使用/来自我关闭的,比如<br>,<input>,<hr>等等这样的标签都是符合语法的. 在XHTML规范中,单独存在的标签要按照XML的语法规则进行自我关闭,上面三个标签就应写成<br />,<inpu

随机推荐