标题略大，不过只是希望通过一些浅显的论述，让你知道什么是图片的 base64 编码，为什么我们要用它，我们如何使用并且方便的使用它，并让你懂得如何去在前端的实际工作中运用它。 ...什么是 base64 编码? 我不是来讲概念的，直接切入正题，图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。 这样做有什么意义呢？...为什么要使用 Base64 编码？ 那么为什么要使用 base64 传输图片文件？上文也有提及，因为这样可以节省一个 http 请求。图片的 base64 编码可以算是前端优化的一环。...如图所示，博客园的 Logo 只有 3.27KB，已经很小了，但是如果将其制作转化成 base64 编码，生成的 base64 字符串编码足足有 4406 个,也就是说，图片被编码之后，生成的字符串编码大小一般而言都会比原文件稍大一些...因为是背景图的缘故，所以无法将它放入雪碧图，而它却存在网站的很多页面，这种图片往往只有几十字节，却需要一个 http 请求，十分不值得。那么此时将它转化为 base64 编码，何乐而不为？
由图可知，Man （3字节）编码的结果为 TWFu（4字节），很明显经过 base64 编码后体积会增加 1/3。Man 这个字符串的长度刚好是 3，我们可以用 4 个 base64 单元来表示。...但如果待编码的字符串长度不是 3 的整数倍时，应该如何处理呢？...绝大多数现代浏览器都支持一种名为 Data URLs 的特性，允许使用 base64 对图片或其他文件的二进制数据进行编码，将其作为文本字符串嵌入网页中。...编码和解码 4.1 使用 btoa 与 atob 函数 在 JavaScript 中，有两个函数被分别用来处理解码和编码 base64 字符串： btoa()：从字符串创建一个 base64 编码的...如果你对加密感兴趣的话，可以阅读 玩转混合加密 这篇文章。 七、参考资源 维基百科 - Base64 Base64 编码原理与应用 知乎 - 为什么要使用base64编码，有哪些情景需求？
怎么把图转成base64？...然后调用： Base64 在CSS中的使用 .demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL......."); } Base64 在HTML中的使用 <img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...这样做，会减少服务器的负载， 当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。 data类型Url的形式 既然是Url，当然也可以直接在浏览器的地址栏中输入。...我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。 坏处呢，就是浏览器不会缓存这种图像。
，想了想既然任何图像在内存里面都是一个uchar矩阵，于是琢磨了这个东西出来。...一般情况下，图像在内存里的表达都是个uchar串，或者说byte流，因为我经常需要写跨语言调用的玩意儿，所以一般在内存里我都是用字符串和比特流进行交互，这里我采用了同样的思想，我们把opencv的图像进行编码为...图像 image.src="data:image/png;base64,"+evt.data; console.log(evt.data);...图像转为图像数据流的字符串形式 function dataURItoBlob(dataURI) { // convert base64/URLEncoded data component...整个服务端的实现难点无非在于编码与解码的方法保持客户端和服务端数据耦合性，这个东西也琢磨了我好几天才琢磨透，再接再厉把，io真的是一个神奇的东西，当你把它深刻的理解到内存的时候，它就像个听话的孩子。
由图可知， Man （3字节）编码的结果为 TWFu（4字节），很明显经过 base64 编码后体积会增加 1/3。Man 这个字符串的长度刚好是 3，我们可以用 4 个 base64 单元来表示。...但如果待编码的字符串长度不是 3 的整数倍时，应该如何处理呢？..."> 但需要注意的是：如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为该图片经过 base64 编码后的字符串非常大，会明显增大 HTML 页面的大小，从而影响加载速度。...，现在已经成为邮件编码方式的主流，不仅是用来传输 8 位的字符，也可以用来传送二进制的文件，如邮件附件中的图像、音频等信息，而且扩展了很多基于 MIME 的应用。...四、如何进行 base64 编码和解码 在 JavaScript 中，有两个函数被分别用来处理解码和编码 base64 字符串： btoa()：该函数能够基于二进制数据 “字符串” 创建一个 base64
由图可知，Man （3字节）编码的结果为 TWFu（4字节），很明显经过 base64 编码后体积会增加 1/3。Man 这个字符串的长度刚好是 3，我们可以用 4 个 base64 单元来表示。...但如果待编码的字符串长度不是 3 的整数倍时，应该如何处理呢？..."> 但需要注意的是：如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为该图片经过 base64 编码后的字符串非常大，会明显增大 HTML 页面的大小，从而影响加载速度。...，现在已经成为邮件编码方式的主流，不仅是用来传输 8 位的字符，也可以用来传送二进制的文件，如邮件附件中的图像、音频等信息，而且扩展了很多基于 MIME 的应用。...四、如何进行 base64 编码和解码 在 JavaScript 中，有两个函数被分别用来处理解码和编码 base64 字符串： btoa()：该函数能够基于二进制数据 “字符串” 创建一个 base64
3.4 Blob 转换为 Base64 URL.createObjectURL 的一个替代方法是，将 Blob 转换为 base64 编码的字符串。...在 MIME 格式的电子邮件中，base64 可以用来将二进制的字节序列数据编码成 ASCII 字符序列构成的文本。使用时，在传输编码方式中指定 base64。...绝大多数现代浏览器都支持一种名为 Data URLs 的特性，允许使用 base64 对图片或其他文件的二进制数据进行编码，将其作为文本字符串嵌入网页中。...如果是二进制数据，你可以将数据进行 base64 编码之后再进行嵌入。..."> 但需要注意的是：如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为该图片经过 base64 编码后的字符串非常大，会明显增大 HTML 页面的大小，从而影响加载速度。
今天，我们就用我们在初高中语文老师教我们的描述一个事物的三大步骤：1. 是什么，2. 如何工作，3. 为什么它很重要。来讲讲Base64算法。 好了，天不早了，干点正事哇。 1....如果需要编码二进制数据，需要先将其转换为字符串。 「字符集限制：」 btoa 函数仅支持 Latin-1 字符集，这意味着它只能编码包含在 Latin-1 字符集内的字符。...如果字符串包含超出 Latin-1 字符集的字符，那么会导致编码失败。 「不适合加密：」Base64 编码不是加密，它只是一种编码方式，不提供安全性。...为什么会出现 Base64 编码 要理解为什么需要 Base64 编码，我们需要了解一些计算机历史。 计算机以二进制（0 和 1）进行通信，但人们通常希望使用更丰富的数据形式进行通信，如文本或图像。...通过上述操作我们会得到一个Base64编码的字符串。如果最后一组中的比特位不足，可以使用=或==作为填充。 让我们以front7作为范例，来模拟上述操作。
缺陷 JPG 的有损压缩在 轮播图 和 背景图 的展示上确实很难看出破绽，但当它处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时，人为压缩导致的 图片模糊 会相当明显。...因此不适宜用该格式来显示 高清晰度 和 线条感较强 的图像。 除此之外， JPG 并不支持对有透明度要求的图像进行显示，如果需要显示 透明图片 还是需要另寻它路。...既然 Base64 这么棒，我们把所有图片都用Base64 好了嘛。 Base64 编码后，图片大小会膨胀为原文件的 4/3（Base64 编码原理）。...如果我们把大图也编码到 HTML 或 CSS 文件中，后者的体积会明显增加，即便我们减少了 HTTP 请求，也无法弥补这庞大的体积带来的性能开销。...也就是说我们牺牲的 渲染性能 大于 资源请求性能，这样做不太值得。 我们可以看到，大多数用 Base64 编码的图片都是小图。
GIF图形交换格式是一种位图图形文件格式,以8位色（即256种颜色）重现真彩色的图像。它实际上是一种压缩文档,采用LZW压缩算法进行编码,有效地减少了图像文件在网络上传输的时间。...： 前面如果有看清楚的有写png和gif是无损压缩,但是实际上通过作图工具导出的png或者gif图片明明很模糊的啊, 为什么呢？...; base64 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。...Base64编码可用于在HTTP环境下传递较长的标识信息, 直接把base64当成是字符串方式的数据就好了 利用Base64的不可读性，可以加密字符串，标准浏览器的window下有两个方法，分别是window.btoa...优点： 1：减少了http请求； 2：数据就是图片； 缺点： 1：如果图片稍微有点大，这个字符串会很长很长； 2：IE6,7 你懂得； 如何获取图片对应的base64字符串呢？
缺陷 JPG 的有损压缩在轮播图和背景图的展示上确实很难看出破绽，但当它处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时，人为压缩导致的图片模糊会相当明显。...因此不适宜用该格式来显示高清晰度和线条感较强的图像。 除此之外， JPG 并不支持对有透明度要求的图像进行显示，如果需要显示透明图片还是需要另寻它路。...Base64 一种基于 64 个可打印字符来表示二进制数据的方法。 优点 减少网络请求 对于动态实时生成的图片无需将图片存储在服务器占用服务器资源 缺点 只适于小图。...“Base64 是一种用于传输 8Bit 字节码的编码方式，通过对图片进行 Base64 编码，我们可以直接将编码结果写入 HTML 或者写入 CSS ，从而减少 HTTP 请求的次数。...如果我们把大图也编码到 HTML 或 CSS 文件中，后者的体积会明显增加，即便我们减少了 HTTP 请求，也无法弥补这庞大的体积带来的性能开销。
readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。...= txt;//将图片base64字符串赋值给img的src document.getElementById("result").appendChild(img); }; } reader.readAsDataURL...方法来读取图像文件 FileReader用来把文件读入内存，并且读取文件中的数据。...FileReader 的 result 可以有 3 种形式, 它取决于具体调用读取的方法 调用 reader. readAsArrayBuffer, 则 result 为 ArrayBuffer 对象...img.src 调试发现 DataURL 是带头信息(/image) 的 base64(可能是) 编码的字符串 FileReader接口的使用示例： <!
c.懒加载 当我们打开一个页面时，浏览器就会从上往下读取页面中的标签src中的地址，并且开启线程来进行加载。...我们知道图片在传输过程中是流传输,如果将图片转换成base64,实际上是变大了,并且浏览器在decode base64编码的图片时需要耗费很多时间的,所以如果我们选择此种方案的话,最好选择一些小图片,...不然得不偿失,在webpack中可以设置最大多少byte的图片压缩成base64 针对decode base64编码的图片比较慢的问题,我们可以选择使用canvas来加速.当向canvas发出绘画命令时...5.测试数据是否满足正则表达式用什么方法 test()： 用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。...如果只设置一个值，则第二个值会被设置为 "auto"。cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。
Base64是一种索引编码，每个字符都对应一个索引，具体的关系图，如下： 这也是名称中64的由来。 编码方式 由于64等于2的6次方，所以一个Base64字符实际上代表着6个二进制位(bit)。...这也是为什么我们在前面讲使用Base64编码优化图片时，需要强调是小图标，如果图片都使用该方式，则静态文件会增大很多，并不合适。 = 等号 3个英文字符，正好能转成4个Base64字符。...注意：atob方法如果传入字符串参数不是有效的Base64编码(如非ASCII码字符)，或者其长度不是4的倍数，会报错。...小图片转码 即开篇说的针对图片优化，使用Base64能减少请求数的，可以在img标签下，或者css中： <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c...，用来读取文件的数据，可以通过它的 readAsDataURL() 方法，将文件数据读取为Base64编码的字符串数据： let reader = new FileReader() reader.onload
在...表明未展示的文字。请注意，此示例或任何其他示例的整个编码比原始二进制数据大大约33％。 收件人的电子邮件软件将对编码的文本图像进行Base64解码，以恢复原始二进制图像。...对于此示例，图像将与消息的其余部分一起显示。 Base64编码和解码 Base64依赖于简单的编码和解码算法。...如果使用Basic或MIME变体，则编码数据中的任何+或/字符必须被URL编码为十六进制序列（+变为%2B和/变为%2F）。生成的URL字符串会稍长一些。...[] src)：将src所有字节编码到新分配的字节数组中，然后返回结果。...String encodeToString(byte[] src)：将src所有字节编码为一个字符串，并返回该字符串。
表明未展示的文字。请注意，此示例或任何其他示例的整个编码比原始二进制数据大大约33％。 收件人的电子邮件软件将对编码的文本图像进行Base64解码，以恢复原始二进制图像。...对于此示例，图像将与消息的其余部分一起显示。 Base64编码和解码 Base64依赖于简单的编码和解码算法。...如果使用Basic或MIME变体，则编码数据中的任何 + 或 / 字符必须被URL编码为十六进制序列（ + 变为 %2B 和 / 变为 %2F ）。生成的URL字符串会稍长一些。...(byte[] src) ：将 src 所有字节编码到新分配的字节数组中，然后返回结果。...String encodeToString(byte[] src) ：将 src 所有字节编码为一个字符串，并返回该字符串。
原来，客户提供的文章数据中包含图片，但由于客户原图不在了，只能从别的地方收集新闻时，把包含图片的新闻采用了 base64 加密串给了小赵。...like '%data:image%' 第二步， 从新闻详情页下载图片，用 fastdfs 分布式文件服务器上传图片后，得到图片的下载地址，替换 img 标签的 src 属性值。...问题总结 什么是 base64 编码？ base64 编码简单来说就是把一张图片数据加密成一串字符，使用该字符串代替图像地址。...3kb 的 logo 图片为例: 一张 3.27 KB logo 图片，已经很小了，但是如果将其制作转化成 base64 编码，生成的 base64 字符串编码足足有 4406 个,也就是说，图片被编码之后...，生成的字符串编码大小一般而言都会比原文件稍大一些。
JPG呈现大图，保证质量，体积不大。 JPG的缺点是：当它处理「矢量图形」和 「Logo」 等线条感较强、颜色对比强烈的图像时，人为压缩导致的图片模糊会相当明显。JPEG 图像「不支持透明度处理。」...base64的优点：「Base64 是一种用于传输 8Bit 字节码的编码方式，通过对图片进行 Base64 编码，我们可以直接将编码结果写入 HTML 或者写入 CSS，从而减少 HTTP 请求的次数...满足以下条件，可以使用base64： 图片的「实际尺寸很小」 图片无法以雪碧图的形式与其它小图结合（合成雪碧图仍是主要的减少 HTTP 请求的途径，Base64 是「雪碧图的补充」） 图片的「更新频率非常低...「expires」 是一个时间戳，如果我们试图再次向服务器请求资源，浏览器就会先对比本地时间和 expires 的时间戳，如果本地时间小于 expires 设定的过期时间，那么就直接去缓存中取这个资源。...「Etag」是由服务器为每个资源生成的唯一的「标识字符串」，这个标识字符串是「基于文件内容编码」的，只要文件内容不同，它们对应的 Etag 就是不同的。
常规的图像格式分为矢量图和位图。 原理： 矢量图形使用线、点和多边形来表示图像。 光栅图形，也可以成为位图，通过对矩形格栅内的每个像素的值进行编码表示图像。...矢量格式适用于简单形状图形，并且变换颜色方便，仅通过 CSS 中的 fill 属性便可以改变颜色。并且在多大的缩放下都能保证清晰，矢量格式不能满足复杂的图像，例如照片，高清图。...优化策略 常见的优化方案： 使用 Data URI 即（base64）编码代替图片：适用于图片大小于 2 KB，页面上引用图片总数不多的情况，原理是将图片转换为 base64 编码字符串 inline...这时我们可以欺骗一下浏览器： 360.jpg 1200w 1200.jpg 9999w 这时浏览器把 360 的图当成了 1200 来用了。这里可能有些疑问，图像的宽度为什么不是90vw 了哪？...这种方式很智能，浏览器根据你的 sizes，从 w 列表中选择最合适的图像来调用显示。 如果我们需要更精确的控制浏览器在什么视口大小下显示多大的图像，可以使用 picture 元素。
领取专属 10元无门槛券
手把手带您无忧上云
