base64图片编码大小与原图文件大小之间的联系
base64图片编码大小与原图文件大小之间的联系
有时候我们需要把canvas画布的图画转换成图片输出页面,而用canvas生成的图片就是base64编码的,它是由数字、字母等一大串的字符组成的,但是我们需要获取它的文件流大小该怎么办呢?
Base64图片编码原理:
Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式。 如果剩下的字符不足3个字节,则用0填充,输出字符使用’=’,因此编码后输出的文本末尾可能会出现1或2个’=’
详情请阅读- base64原理
当我们知道base64编码的图片的字符大小,怎么计算图片的文件流大小呢??
通过base64编码原理我们知道,base64的图片字符流中的每8个字符就有两个是用0补充,而且字符流的末尾还可能存在‘=’号,我们可以通过这个原理计算图片的文件流大小。
下面举例:
这是一张图片的base64编码:
data:image/png;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAAAAB9SR//fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/6mHbP+LXDf/fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/99SR//i104/5lwT/+RZkP/fksh/6eFaP/8/Pv/mG9N/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/+tjHL/6uHb//7+/v////////////Xx7v/8+/r//////6N/Yv99SR//fUkf/31JH/99SR//fUkf/35LIf/PvK3///////////////////////////////////////////+vj3b/fUkf/31JH/99SR//fUkf/31JH/++pI/////////////08Oz/vqSQ/8y3p///////////////////////u6CK/31JH/99SR//fUkf/31JH/+IWDL/+vn3///////s5d//iVo1/6B7XP/6+ff/8Orl/9TDtv+5nYb/nXZX/4NRKf9+SyL/fUkf/31JH/99SR//sJF3////////////onxe/35LIv+ge1z/ils1/31JH/99SR//fUkf/6qIbf/dz8T/1MK0/31JH/99SR//fUkf/8WunP///////Pv7/39MIv99SR//fUkf/31JH/99SR//fUkf/31JH//ay7///////+ri2/99SR//fUkf/31JH//Frpv///////38+/9/TCP/fUkf/31JH/99SR//fUkf/31JH/99SR//2szA///////q4dv/fUkf/31JH/99SR//r491////////////pIBi/31JH/99SR//fUkf/31JH/99SR//hVUt//j29P//////1MK1/31JH/99SR//fUkf/4dXMP/59/b//////+7o4/+MXjn/fUkf/31JH/99SR//gE0k/9XFuP///////////6aDZ/99SR//fUkf/31JH/99SR//up+I////////////9vPw/8OrmP+si3D/uZ2G/+ri2////////////97Rx/99SiD/fUkf/31JH/99SR//fUkf/31KIP/KtqX//v7+/////////////////////////////////+Xb0/+HWDH/fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/6eFaP/l2tL//v7+////////////8evn/7yhi/+BTyb/fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/99SR//fUkf/4dXMP+Uakf/jV86/31JH/99SR//fUkf/31JH/99SR//fUkf/31JH/9/SyH/f0sh/39LIf9/SyH/f0sh/39LIf9/SyH/f0sh/39LIf9/SyH/f0sh/39LIf9/SyH/f0sh/39LIf9/SyH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==
为了方便,我们用str代替上面编码。
1.需要计算文件流大小,首先把头部的data:image/png;base64,(注意有逗号)去掉。
var str = base64pic.split(",")[1];
2.找到等号,把等号也去掉
var equalIndex= str.indexOf(‘=’);
if(str.indexOf(‘=’)>0)
{
str=str.substring(0, equalIndex); }
3.原来的字符流大小,单位为字节
var strLength=str.length;
4.计算后得到的文件流大小,单位为字节
var fileLength=parseInt(strLength-(strLength/8)*2);
推荐一个文件流图片转base64编码流图片的在线工具- base64转换
转载: http://blog.csdn.net/chenyejunjun/article/details/54924355
base64图片编码大小与原图文件大小之间的联系的更多相关文章
- Base64图片编码原理,base64图片工具介绍,图片在线转换Base64
Base64图片编码原理,base64图片工具介绍,图片在线转换Base64 DataURI 允许在HTML文档中嵌入小文件,可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码,减少 ...
- Base64图片编码的使用
一.base64编码介绍 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,Base64编码可用于在HTTP环境下传递较长的标识信息.采用Base64编码具有不可读性,即所编码的数据 ...
- Java base64 图片编码转换
package com.test; import org.junit.Test; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encode ...
- Base64图片编码优化
通过对图片进行base64编码,将base64(或其他数据)内嵌在image标签的属性当中(或者CSS中或JavaScript中),可以实现将图片直接嵌入代码中的目的,如此一来,可以减少HTTP请求, ...
- python base64(图片)编码
参考:https://blog.csdn.net/Good_Luck_Kevin2018/article/details/80953312 通常会在网页中遇到用src="data:image ...
- base64 图片编码之再优化
首先进入网站: http://b64.io/ 最多可减少图片体积容量近70%,建议不要优化base 64 图片格式为gif , 已实测如果用gif的话会增加容量.
- [转]关于CLOB存储Base64图片编码,直接在前台显示解决方案
转至:http://ouapi.com/tool/imgtob 两种方案: Base64在CSS中的使用 .yanshishuxing{ background-image: url("dat ...
- 关于前端使用JavaScript获取base64图片大小的方法
base64原理 Base64编码要求把3个8位字节(38=24)转化为4个6位的字节(46=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节,则用0填充,输出字 ...
- PHP将图片转base64编码以及base64图片转换为图片并保存代码
图片转base64编码 /*图片转换为 base64格式编码*/ $img = 'uploads/01.png'; $base64_img = base64EncodeImage($img); ech ...
随机推荐
- 钉钉与wcp知识库集成工具
dingding-wcp 钉钉(dingding)的wcp(知识库)集成通知,非常简单的小工具.(wcp版本 V.free.4.0.4) git: https://gitee.com/chejiang ...
- Sitecore 6.4 升级Sitecore 8.2.7准备
考虑Sitecore升级?尽管这可能是一项令人生畏的任务,但这三个技巧可以帮助您无缝地完成整个过程. 如果您当前正在运行较旧版本的Sitecore并希望升级到最新版本,那么您可能已经瞥了一眼说明,但却 ...
- spring boot Websocket
本文只作为个人笔记,大部分代码是引用其他人的文章的. 参考: https://blog.csdn.net/moshowgame/article/details/80275084 在springboot ...
- 【题解】最长递增路径 [51nod1274]
[题解]最长递增路径 [51nod1274] 传送门:最长递增路径 \([51nod1274]\) [题目描述] 一个可能有自环有重边的无向图,每条边都有边权.输入两个整数 \(n,m\) 表示一共 ...
- 【java】单实例下的 流水号【21位】
单实例环境,不是分布式 需要流水号 /** * 流水号生成器 * * 年+天号+毫秒+随机数 * 2019+134+480+11位随机数 * 4+3+3+11 = 21位 * * * @author ...
- docker 安装tomcat容器和mysql容器
1. docker pull mysql:5.6 2.docker run -p 3306:3306 --name mysql -v /data/mysql/conf:/etc/mysql/conf. ...
- C# 多维数组 交错数组的区别,即 [ , ] 与 [ ][ ]的区别 (转载)
多维数组的声明 在声明时,必须指定数组的长度,格式为 type [lenght ,lenght ,lengh, ... ] , ]; 或声明时即赋值,由系统推断长度 int [,] test1 = { ...
- 分布式系统根基:物理时钟和Lamport逻辑时钟
分布式系统解决了传统单体架构的单点问题和性能容量问题,另一方面也带来了很多的问题,其中一个问题就是多节点的时间同步问题:不同机器上的物理时钟难以同步,导致无法区分在分布式系统中多个节点的事件时序.19 ...
- 图解再谈ssh port forwarding-ssh隧道技术
https://www.ramkitech.com/2012/04/how-to-do-ssh-tunneling-port-forwarding.html https://www.cnblogs.c ...
- Deepo
Deepo is a series of Docker images that allows you to quickly set up your deep learning research env ...