精华内容
下载资源
问答
  • base64图片编码大小与原图文件大小之间的联系

    万次阅读 多人点赞 2017-02-08 11:01:36
    base64图片编码大小与原图文件大小之间的联系 有时候我们需要把canvas画布的图画转换成图片输出页面,而用canvas生成的图片就是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,(注意有逗号)去掉。

    str=str.substring(22);
    

    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);
    

    5.输出文件流大小

    alert(fileLength);
    





    以上是文章的主要内容,有问题请多多交流

    推荐一个文件流图片转base64编码流图片的在线工具- base64转换

    展开全文
  • base64模块是用来作base64编码解码的。这种编码方式在电子邮件中是很常见的。 它可以把不能作为文本显示的二进制数据编码为可显示的文本信息。编码后的文本大小会增大1/3。 闲话不说了,base64模块真正用的上的方法...
  • 在一些业务场景下,我们会将文件或图片转化为Base64编码进制传输,而业务中有需要对文件的大小进行限制,如何在不进行解码的情况下判断出文件的大小呢。 编码格式 Base64编码要求把3个8位字节(38=24)转化为4个6位...

    前言


    在一些业务场景下,我们会将文件或图片转化为Base64编码进制传输,而业务中有需要对文件的大小进行限制,如何在不进行解码的情况下判断出文件的大小呢。


    编码格式


    Base64编码要求把3个8位字节(38=24)转化为4个6位的字节(46=24),之后在6位的前面补两个0,形成8位一个字节的形式。
    如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'='。
    为了保证所输出的编码位可读字符,Base64制定了一个编码表,以便进行统一转换。编码表的大小为2^6=64,这也是Base64名称的由来。


    文件大小计算


    由Base64编码的性质可知,原文件在经由Base64编码后,体积会增长1/3。 1 → 4/3
    反之,Base64字符串中的4个字符即对应原文件的3字节。
    那么计算原文件的大小只需要得出Base64字符串的长度,再乘以0.75即可。该方法可能存在1Byte的大小误差,计算出的大小可能比真实大小多1Byte,也可能与真实文件大小正好相等。


    参考:https://www.cnblogs.com/bigorang/p/10702944.htmlhttp://cn.voidcc.com/question/p-oameqciv-xg.html

    展开全文
  • Base64编码

    2013-05-08 10:02:59
    Base64编码说明  Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式。 如果剩下的字符不足3个字节,则用0填充,输出...编码表的大小为2^6=64,这

    Base64编码说明
      Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式。 如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'='。

      为了保证所输出的编码位可读字符,Base64制定了一个编码表,以便进行统一转换。编码表的大小为2^6=64,这也是Base64名称的由来。

    Base64编码表

    码值 字符   码值 字符   码值 字符   码值 字符
    0 A 16 Q 32 g 48 w
    1 B 17 R 33 h 49 x
    2 C 18 S 34 i 50 y
    3 D 19 T 35 j 51 z
    4 E 20 U 36 k 52 0
    5 F 21 V 37 l 53 1
    6 G 22 W 38 m 54 2
    7 H 23 X 39 n 55 3
    8 I 24 Y 40 o 56 4
    9 J 25 Z 41 p 57 5
    10 K 26 a 42 q 58 6
    11 L 27 b 43 r 59 7
    12 M 28 c 44 s 60 8
    13 N 29 d 45 t 61 9
    14 O 30 e 46 u 62 +
    15 P 31 f 47 v 63 /
    展开全文
  • 自己使用vc6编写的只有约4000字节的base64编码解码软件。 使用范例: 编码base64 notepad.exe notepad.b64.txt 解码1: type notepad.b64.txt | base64 - > notepad.exe 解码2: echo aGVsbG8sd29ybGQhDQq= | base...
  • 自己使用vc6编写的只有约4000字节的base64编码解码软件。 使用范例: 编码base64 notepad.exe notepad.b64.txt 解码1: type notepad.b64.txt | base64 - 解码2: echo aGVsbG8sd29ybGQhDQq= | base64 -
  • 图片Base64编码

    千次阅读 2017-12-19 16:41:43
    什么是图片Base64编码图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。这样的意义是:网页上的每一个图片,都要消耗一个http请求下载而来(所以CSS雪碧图技术应运而生),而...

    什么是图片Base64编码

    图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。

    这样的意义是:

    网页上的每一个图片,都要消耗一个http请求下载而来(所以CSS雪碧图技术应运而生),而将图片编码成为base64格式可以随着html下载的同时下载到本地,从而节省了一次http请求

    写法

    #fkbx-spch, #fkbx-hspch {
      background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
    }
    
    <img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

    上面分别是图片的 base64 编码在 css 里面的写法和在 img 标签里的写法。

    何时使用Base64编码

    首先是上面提到的,可以节省一次http请求

    同样,CssSprites 也可以减少http请求,对于二者的取舍要点在于:

    如果图片足够小且因为用处的特殊性无法被制作成雪碧图(CssSprites),在整个网站的复用性很高且基本不会被更新。

    如果较大的图片转换为Base64编码之后,生成的字符串编码大小一般而言都会比原文件稍大一些,而且会对CSS整体的可读性产生很大的影响

    将图片转化为Base64编码  

    在 chrome 下新建一个窗口,然后把要转化的图片直接拖入浏览器,打开控制台,点 Source,如下图所示,点击图片,右侧就会显示该图片的 base64 编码

    image

    Base64的缺点

    1、使用 Base64 不代表性能优化

    使用 Base64 的好处是能够减少一个图片的 HTTP 请求,然而,与之同时付出的代价则是 CSS 文件体积的增大。

    而 CSS 文件体积的增大意味着什么呢?意味着 CRP 的阻塞。

    通俗而言,就是图片不会导致关键渲染路径的阻塞,而转化为 Base64 的图片大大增加了 CSS 文件的体积,CSS 文件的体积直接影响渲染,导致用户会长时间注视空白屏幕。HTML 和 CSS 阻塞渲染,而图片不会。

    2、页面解析CSS时间增长

    如果把大图片编码到 html / css 中,会造成后者体积明显增加,明显影响网页的打开速度。

    3、兼容性问题

    使用 base64 的另外一个弊端是 IE 的兼容性问题。IE 8 以下不支持 data url,IE 8 开始支持 data url,却有大小限制,32k(未测试)。

    4、编辑问题

    还有一个问题是,如果构建工具比较落后(或者没有构建工具),手动插入 base64 是很蛋疼的,编辑器会卡到哭。

    webpack

    webpack的url-loader插件可以自动根据文件大小决定要不要做成内联 base64

    webpack.config.js

    module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192
                }
              }
            ]
          }
        ]
      }
    }

    exam项目中的配置:

    const path = require('path');
    
    module.exports = {
      target: 'web',
    
      appEntries: {
        examIndex: './app/entries/ExamIndex',
        markIndex: './app/entries/MarkIndex'
      },
    
      urlLoader: {
        test: /\.(jpg|png|gif|svg)(\?.+)?$/,
        loader: 'url-loader?limit=8192&name=[name]-[hash:8].[ext]'
      },
    
      fileLoader: {
        test: /\.(ttf|otf|eot|woff2?)(\?.+)?$/,
        loader: 'file-loader?name=[name]-[hash:8].[ext]'
      }
    };
    

    加载之后,网页中小8kb的图片都被转为了base64编码格式存在:

    参考

    展开全文
  • Web 图片Base64编码

    千次阅读 2017-04-17 20:33:41
    转载自: 【前端攻略】:玩转图片Base64编码引言 图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 编码。标题略大,...
  • base64编码解码出错

    2020-10-14 15:35:25
    在linux的shell对文件进行base64编码,然后POST到php后端,但是php内的base64解码获取不到正确结果 原因 编码使用的RFC标准不同 shell里将空格标记为+,php则删除了空格,所以可以发现,用php进行base64编码的结果更...
  • 用于图像文件和Base64编码图像的调整大小插件。 演示版 调整图片文件大小 调整base64编码图像的大小 安装 apm install atom-image-resize 特征 预览图像文件(jpg,png,gif)和base64编码的图像字符串。 调整...
  • 将unicode的base64编码 转化为ascii编码 例子: unicode的base64编码:AGwAaQBuAGcAdABl 得到解码: lingtu 请问怎么得到这个 结果啊。。
  • Base64编码换行问题

    2020-10-11 16:16:14
    我在做人脸识别时,发现同一张图片识别为不是一张。 场景:一张图片由前端传来,格式为base64. 同样一张图片由后端转化为base64。 结果发现,人脸识别... 而后端转化的base64编码是换行的(由使用的转换包...
  • import base64 ...# 图片编码base64 with open('temp1.png', 'rb') as fin: image_data = fin.read() print(image_data) base64_data = base64.b64encode(image_data) print(base64_data) fout =...
  • 图片base64编码

    千次阅读 2017-03-03 09:38:45
    而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 编码。标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片的 base64 编码,为什么我们要用它,我们如何...
  • base64编码图片数据存储服务器

    千次阅读 2017-03-06 19:50:45
    base64编码图片数据存储服务器 如果直接提交base64编码图片数据,过大的话后台会出现转发错误问题。 我在刚开始接触base64编码图片数据时,就是把base64编码图片数据传到后台来解码生成图片。导致生成的图片无法打开...
  • 玩转图片Base64编码

    千次阅读 2015-03-31 22:36:09
    而图片的Base64编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的base64编码。标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片的base64编码,为什么我们要用它,我们如何使用并且...
  • VUE Base64编码图片展示与转换图片

    千次阅读 2020-06-23 14:25:24
    VUE Base64编码图片展示与转换图片VUE Base64编码图片展示与转换图片VUE Base64编码图片展示Base64编码转换图片文件转换base64编码更便捷的图片转化Base64编码方式 VUE Base64编码图片展示与转换图片 图片的 base64 ...
  • base64编码的图片如何存入数据库

    千次阅读 2019-12-24 16:39:16
    base64编码的图片存入数据库的地址为服务器,如果前端获取不到base64编码的话,需要把图片路径转换成文件,再把File文件转成base64,发送给后台,接口获取文件流,转成文件放在服务器地址,然后获取服务器的地址再...
  • Base64编码

    千次阅读 2016-08-25 13:52:07
     Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式。 如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能...
  • 后端生成图形验证码,并进行base64编码生成字符串传至前端,由前端解码显示图形验证码,代码如下: 后端-获取图形验证码base64编码字符串接口: /** * @param response * @return map * @throws Exception 获取...
  • base64编码介绍 | Base64 Encode Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,Base64编码可用于在HTTP环境下传递较长的标识信息。 采用Base64编码具有不可读性,即所编码的数据不会被人用肉眼所...
  • Android Base64 编码/解码

    万次阅读 2014-10-24 19:12:42
    Base64编码说明  Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式。 如果剩下的字符不足3个字节,则用0填充,输出...编码表的大小为2^6=64,这
  • Base64编码解码原理

    千次阅读 2019-09-19 09:22:15
    本篇文章主要是从Base64的原理入手,并给出java的Base64实现。方便了解、学习Base64base64的简介----摘自于百度百科 一、Base64大致用途 很早之前,电子邮件刚刚问世,那时候消息的传递都是英文,后来中国...
  • 首先讲一下什么是Base64编码
  • 通过base64编码原理我们知道,base64的图片字符流中的每8个字符就有两个是用0补充,而且字符流的末尾还可能存在‘=’号,我们可以通过这个原理计算图片的文件流大小。 getImgByteSize(data) { if (data....
  • Base16,Base32,Base64编码的介绍

    万次阅读 2018-08-30 10:42:18
    简介 在网络传入字符串过程中,如果编码...为了防止这种情况的出现,出现了Base16,Base32,Base64编码方式.我们知道计算机传输的单位是字节,也就是8个比特位,按照一个字节编码的方式结果就有256种状态(每个比特位0或...
  • android base64编码问题

    2018-08-29 15:04:48
    在android上传图片的时候,有时候需要把图片转换为base64编码上传到服务器 开始的时候使用以下方法 fun imageToBase64(path: String): String? { if (TextUtils.isEmpty(path)) { return null } var `is`: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 89,432
精华内容 35,772
关键字:

base64编码的大小