Base64图片编码原理,base64图片工具介绍,图片在线转换Base64

DataURI 允许在HTML文档中嵌入小文件,可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码,减少 HTTP 请求,加快小图像的加载时间。

经过Base64 编码后的文件体积一般比源文件大 30% 左右。

// Base64 在CSS中的使用
.box{
background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}
// Base64 在HTML中的使用
<img src="data:image/jpg;base64,/9j/4QMZR..." />

图片在线转换Base64,图片编码base64
https://www.css-js.com/tools/base64.html

支持Base64(DataURI)的浏览器

Chrome 4+  
Android Chrome 57+
Firefox 2+
Android Firefox 52+
Safari 3.1+
IOS Safari 3.2+
Opera 9+ Opera9~11 限制为 64K
IE 8+ IE8 限制为 32KB
Mobile IE10+  
Edge12+
Android UC11+
QQ Browser1.2+

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编码及大小[h5]

http://gj.3gwen.com/tpbase64.html?kbl=

  • Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,Base64编码可用于在HTTP环境下传递较长的标识信息。采用Base64编码具有不可读性,即所编码的数据不会被人用肉眼所直接看到。
  • 在MIME格式的电子邮件中,base64可以用来将binary的字节序列数据编码成ASCII字符序列构成的文本。使用时,在传输编码方式中指定base64。使用的字符包括大小写字母各26个,加上10个数字,和加号“+”,斜杠“/”,一共64个字符,等号“=”用来作为后缀用途。
  • Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式。 如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'='。
  • 为了保证所输出的编码位可读字符,Base64制定了一个编码表,以便进行统一转换。编码表的大小为2^6=64,这也是Base64名称的由来。

    base64图片工具介绍

    • 支持 PNG、GIF、JPG、BMP、ICO 格式。
    • 支持查看图片的具体大小。上传过程无需网络。
    • 将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方。
    • 假定生成的代码为“data:image/jpeg;base64, .....”,那么你只需要全部复制,然后在插入图片的时候,地址填写这段代码即可。
    • CSS中使用:

      background-image: url("data:image/png;base64,iVBORw0KGgo=...");
    • HTML中使用:

      <img src="data:image/png;base64,iVBORw0KGgo=..." />
    • 图片转换Base64,无线开发、HTML5、CSS3必备的工具,CSS DataURI Base64 工具。
    • 将图片转换成base64编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片404错误。

当我们知道base64编码的图片的字符大小,怎么计算图片的文件流大小呢??

通过base64编码原理我们知道,base64的图片字符流中的每8个字符就有两个是用0补充,而且字符流的末尾还可能存在‘=’号,我们可以通过这个原理计算图片的文件流大小。

下面举例:

这是一张图片的base64编码:

data:image/png;base64,AAAB.....
AAA==

为了方便,我们用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图片工具介绍,图片在线转换Base64的更多相关文章

  1. base64图片编码大小与原图文件大小之间的联系

    base64图片编码大小与原图文件大小之间的联系 有时候我们需要把canvas画布的图画转换成图片输出页面,而用canvas生成的图片就是base64编码的,它是由数字.字母等一大串的字符组成的,但是 ...

  2. 一篇文章彻底弄懂Base64编码原理

    在互联网中的每一刻,你可能都在享受着Base64带来的便捷,但对于Base64的基础原理又了解多少?今天这篇博文带领大家了解一下Base64的底层实现. Base64的由来 目前Base64已经成为网 ...

  3. 一篇文章彻底弄懂Base64编码原理(转载)

    在互联网中的每一刻,你可能都在享受着Base64带来的便捷,但对于Base64的基础原理又了解多少?今天这篇博文带领大家了解一下Base64的底层实现. Base64的由来 目前Base64已经成为网 ...

  4. 知识扩展——(转)一篇文章彻底弄懂Base64编码原理

    在互联网中的每一刻,你可能都在享受着Base64带来的便捷,但对于Base64的基础原理又了解多少?今天这篇博文带领大家了解一下Base64的底层实现. 一.Base64的由来 目前Base64已经成 ...

  5. BASE64编码原理分析脚本实现及逆向案例

    在互联网中的每一刻,你可能都在享受着Base64带来的便捷,但对于Base64的基础原理你又了解多少?今天小编带大家了解一下Base64编码原理分析脚本实现及逆向案例的相关内容.   01编码由来 数 ...

  6. Base64图片编码的使用

    一.base64编码介绍 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,Base64编码可用于在HTTP环境下传递较长的标识信息.采用Base64编码具有不可读性,即所编码的数据 ...

  7. java自带BASE64工具进行图片和字符串转换

    java自带BASE64工具进行图片和字符串转换 import java.io.File; import java.io.FileInputStream; import java.io.FileOut ...

  8. 011_如何decode url及图片转为base64文本编码总结

    一.咱们经常会遇到浏览器给encode后的url,如何转换成咱们都能识别的url呢?很简单,talk is easy,Please show me your code,如下所示: (1)英文decod ...

  9. java自带BASE64工具进行图片和字符串转换【转】

    java自带BASE64工具进行图片和字符串转换 import java.io.File; import java.io.FileInputStream; import java.io.FileOut ...

随机推荐

  1. python datetime 模块

    import datetime datetime.datetime.now() 打印本地当前时间 >>> print(datetime.datetime.now()) 2017-12 ...

  2. 打开Delphi 10.1 berlin提示脚本错误的解决方法

    HKEY_CURRENT_USER\SOFTWARE\Embarcadero\BDS\18.0\Known IDE Packages $(BDS)\Bin\CommunityToolbar240.bp ...

  3. 016-插件使用-head

    一.安装以及概览 elasticsearch-head将是一款专门针对于elasticsearch的客户端工具 elasticsearch-head配置包,下载地址:https://github.co ...

  4. 【LDA】周志华

    一.书籍

  5. 版本控制之GitHub亲手实验总结

        使用Git的基本方式是:第一种,在remote端创建一个repository,clone到本地,然后在本地把已有文件添加进来/在本地clone的目录下创建新文件,再add 提交等纳入git版本 ...

  6. Spark DataFrame列的合并与拆分

    版本说明:Spark-2.3.0 使用Spark SQL在对数据进行处理的过程中,可能会遇到对一列数据拆分为多列,或者把多列数据合并为一列.这里记录一下目前想到的对DataFrame列数据进行合并和拆 ...

  7. (转)Java静态内部类的实例化问题

    最近遇到的一个问题,记录一下. 静态内部类可以被实例化! 1.首先在外部类中的static方法中不能使用普通内部类,因为内部类必须要与外部类建立关联才能使用,可以说是同生共死. 2.我在编码过程中,需 ...

  8. div+CSS实现页面的布局要点记录

    1.页面任何控件可以通过div包装为一个模块,然后通过margin(外补丁)和padding(内补丁)对控件位置的摆放进行控制,以实现想要的效果. 2.position:absolute;对控件实现绝 ...

  9. 【LeetCode每天一题】Longest Valid Parentheses(最长有效括弧)

    Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...

  10. Jmeter-----邮件观察仪

    设置邮件观察仪的目的,将测试结果通过邮件的方式发送给相关的人员,可及时获取到当前测试结果情况. 说明: 本人公司使用的为腾讯企业邮箱,因此下面的介绍方式将以腾讯企业邮箱为准来进行描述 必要的设置: 邮 ...