我们经常在做Jquery插件的时候需要插入一些自定义的控件,比如说按钮,而我们自己又觉着button标签很丑,而且不同浏览器显示的效果还不一样,这个时候我们需要用到图片,当然,我们可以通过img标签添加src,这个时候我们需要jpg、png、gif等格式的图片相匹配,这样的话,需要添加额外的文件,使得这个文件的可移植性变差,这个时候我们就可以将图片转为Base64编码,即将图片转化为字符方式放在html文件中。

  Base64编码要求把每三个8Bit的字节转换为四个6Bit的字节(3*8 = 4*6 = 24),然后把6Bit再添两位高位0,组成四个8Bit的字节,也就是说,转换后的字符串理论上将要比原来的长1/3。没76个字符1需添加一个换行符,当原文的字符不是3的倍数,原文剩余的字节根据编码规则继续单独转(1变2,2变3;不够的位数用0补全),再用=号补满4个字节。这就是为什么有些Base64编码会以一个或两个等号结束的原因,但等号最多只有两个。所以当原文除以3在任何情况下都只可能是0,1,2这三个数中的一个。如果余数是0的话,就表示原文字节数正好是3的倍数(最理想的情况)。如果是1的话,转成2个Base64编码字符,为了让Base64编码是4的倍数,就要补2个等号;同理,如果是2的话,就要补1个等号。

  关于Base64字符编码网络上有很多教程。我这里主要介绍如何将图片转为Base64编码,用到JS或者Html代码中,其实用过PHP的程序猿都知道这个其实很简单,PHP自带函数file_get_contents将上传的图片转为字符串类型,然后通过base64_encode就可以将字符串转为相应的Base64编码。

  

 string file_get_contents ( string $filename [, bool $use_include_path = false [, resource $context [, int $offset = -1 [, int $maxlen ]]]] )

 string base64_encode ( string $data )

  通过以上两个函数就可以将图片转为了Base64码了,然后html可以通过CSS样式表来加载Base64码。

  

.image{    width:4px;    height:8px;     background-image:url(data:image/png;base64,Base64码);}

  下面是我自己做的一个图片转Base64码的工具,具体实现方式就和上面讲的一样。

  图片转Base64码工具

  

图片Base64编码的更多相关文章

  1. [转]玩转图片Base64编码

    转自:[前端攻略]:玩转图片Base64编码 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 ...

  2. 对JSON传递图片Base64编码的一点总结

    项目中跟Java对接的时候需要传输图片,经过Base64编码后传输的. 但是实际调试的时候发现Java那边始终无法正常解析出图片. 冷静想想之后,发现问题在于使用OpenCV读取图片,编码的是Mat: ...

  3. 在线图片base64编码

    图片Base64编码https://oktools.net/image2base64 在线工具https://oktools.net JSON格式化https://oktools.net/json U ...

  4. 图片base64编码解码

    1.图片base64编码 https://c.runoob.com/front-end/59 2.图片base64解码 https://www.it399.com/image/base64 https ...

  5. 【前端攻略】:玩转图片Base64编码

    引言 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 编码.标题略大,不过只是希望通过一些浅显 ...

  6. 20141203图片Base64编码与解码

    最近需要将图片通过转码的形式传给移动端,使用了Base64转码与 解码 import java.io.FileInputStream; import java.io.FileOutputStream; ...

  7. 获取图片base64编码的几种方法

    前文中我们聊了 Data URI 和 base64编码,稍微回顾下.base64编码 是将数据用 64 个可打印的字符进行编码的方式,任何数据底层实现都是二进制,所以都可以进行 base64编码,ba ...

  8. 玩转图片Base64编码

    什么是 base64 编码? 图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要消耗一 ...

  9. 图片Base64编码 简单使用

    图片在线转换Base64,图片编码base64 http://tool.css-js.com/base64.html HTML5 + js <input type="file" ...

随机推荐

  1. Python 30分钟入门——数据类型 and 控制结构

    Python是一门脚本语言,我也久闻大名,但正真系统的接触学习是在去年(2013)年底到今年(2014)年初的时候.不得不说的是Python的官方文档相当齐全,如果你是在Windows上学习Pytho ...

  2. Demo中的IOC自定义实现

    在做练习的时候,小小项目,使用IOC控件觉得麻烦,使用工厂觉得不高大上啊,自己写个简陋的依赖注入IOC吧; 控制反转(IOC)是管理映射依赖的的,是依赖倒置(DIP)的实现方式; 依赖倒置(DIP)是 ...

  3. vue.js 接收url参数

    1) 路由配置传参方式 在配置路由时 例如 "/firewall/authorize/:uid/:uname/:token" 页面url为 http://XXX.com/firew ...

  4. oracle11g interval(numtoyminterval())自动创建表分区

    Oracle11g通过间隔分区实现按月创建表分区 在项目数据库设计过程中由于单表的数据量非常庞大,需要对表进行分区处理.由于表中的数据是历史交易,故按月分区,提升查询和管理. 由于之前对于表分区了解不 ...

  5. 【转】Windows下使用libsvm中的grid.py和easy.py进行参数调优

    libsvm中有进行参数调优的工具grid.py和easy.py可以使用,这些工具可以帮助我们选择更好的参数,减少自己参数选优带来的烦扰. 所需工具:libsvm.gnuplot 本机环境:Windo ...

  6. EditView 输入限制(软键盘限制)

    众所周知EditView有个inputType 属性可以设置输入的类型. 如下设置,则只能输入数字: android:inputType="number" 但是有时候需要自定义输入 ...

  7. ElasticSearch性能优化官方建议

    ES 手册 如何提高ES的性能 不要返回较大的结果集 ES是设计成一个搜索引擎的,只擅长返回匹配查询较少文档,如果需要返回非常多的文档需要使用Scroll. 避免稀疏 因为ES是基于Lucene来索引 ...

  8. 《Mastering.Ext.JS. 》书上主要示例都搞了个样子出来,纪念

  9. Git版本控制管理学习笔记5-提交

        这个标题其实有些让人费解,因为会想这个提交是动词还是名称?     提交动作是通过git commit命令来实现的,提交之后会在对象库中新增一个提交对象.提交过程中会发生哪些变化,在上一篇笔记 ...

  10. Spring Security4.X 简单实例介绍

    简介 本例子采用的是SpringMVC.SpringSecurity和Spring整合的简单使用 使用gradle搭建的项目(gradle比maven更加便捷),可以自行了解 web.xml配置 &l ...