图片Base64编码
我们经常在做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编码
转自:[前端攻略]:玩转图片Base64编码 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 ...
- 对JSON传递图片Base64编码的一点总结
项目中跟Java对接的时候需要传输图片,经过Base64编码后传输的. 但是实际调试的时候发现Java那边始终无法正常解析出图片. 冷静想想之后,发现问题在于使用OpenCV读取图片,编码的是Mat: ...
- 在线图片base64编码
图片Base64编码https://oktools.net/image2base64 在线工具https://oktools.net JSON格式化https://oktools.net/json U ...
- 图片base64编码解码
1.图片base64编码 https://c.runoob.com/front-end/59 2.图片base64解码 https://www.it399.com/image/base64 https ...
- 【前端攻略】:玩转图片Base64编码
引言 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 编码.标题略大,不过只是希望通过一些浅显 ...
- 20141203图片Base64编码与解码
最近需要将图片通过转码的形式传给移动端,使用了Base64转码与 解码 import java.io.FileInputStream; import java.io.FileOutputStream; ...
- 获取图片base64编码的几种方法
前文中我们聊了 Data URI 和 base64编码,稍微回顾下.base64编码 是将数据用 64 个可打印的字符进行编码的方式,任何数据底层实现都是二进制,所以都可以进行 base64编码,ba ...
- 玩转图片Base64编码
什么是 base64 编码? 图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要消耗一 ...
- 图片Base64编码 简单使用
图片在线转换Base64,图片编码base64 http://tool.css-js.com/base64.html HTML5 + js <input type="file" ...
随机推荐
- grep 命令
简单介绍:grep命令是用于分析一行信息,若当中有我们所需要的信息,就将该行取出来. 语法结构:grep [-acinv] [--color=auto] '查找关键字' #{filename} -a: ...
- python 装饰器的理解
一. 装饰器是一个很著名的设计模式,经常被用于有切面需求的场景,较为经典的有插入日志.性能测试.事务处理等.装饰器是解决这类问题的绝佳设计,有了装饰器,我们就可以抽离出大量函数中与函数功能本身无关的雷 ...
- 一些有趣的Javascript技巧
整理一些刷题时学会的小技巧…… 目录: 即大于0又小于0的变量 String.split() 与 正则表达式 缓存的几种方法 初始化一个数组 即大于0又小于0的变量 问题: 设计一个变量val,使得以 ...
- js中bind、call、apply函数的用法
最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web的项目,然后在腾讯实习的时候用 js 写过一些奇怪的程序,自己也用 js 写过几个的网站.但 ...
- js调用php和php调用js的方法举例
js调用php和php调用js的方法举例1 JS方式调用PHP文件并取得php中的值 举一个简单的例子来说明: 如在页面a.html中用下面这句调用: <script type="te ...
- 设计模式--适配器模式Adapter(结构型)
一.适配器模式 适配器模式的主要作用是在新接口和老接口之间进行适配.将一个类的接口转换成客户端期望的另外一个接口.其实适配器模式有点无赖之举,在前期设计的时候,我们就不应该考虑适配器模式,而应该通过重 ...
- HttpClient (POST GET PUT)请求
HttpClient (POST GET PUT)请求 package com.curender.web.server.http; import java.io.IOException; import ...
- mysql workbench连接不上远程数据库,xshell无法连接远程主机的问题
1.先说xshell无法连接的问题 最近使用virtualbox装了个ubuntu-16.04,然后在win7上使用xshell连接,首先确认win7能ping通虚拟机ip.然后确认是否安装了open ...
- .net学习笔记---tcp/udp/http/socket
什么是TCP和UDP,以及二者区别是什么? TCP的全称为传输控制协议.这种协议可以提供面向连接的.可靠的.点到点的通信. UDP全称为用户数据报协议,它可以提供非连接的不可靠的点到多点的通信. 使用 ...
- Winform窗体最大化的时候,如何指定窗体的位置、大小
一.重写窗体的SizeChanged事件不能改变窗体最大化的位置和大小. public partial class Form2 : Form { public Form2() { Initialize ...