减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)-爱编程
减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)
　　在网站开发过程中，对于页面的加载效率一般都想尽办法求快。那么，怎么让才能更快呢？减少页面请求 是一个优化页面加载速度很好的方法。上一篇博文我们讲解了 &利用将小图标合成一张背景图来减少HTTP请求&，那么，这一篇博文将讲解& & 将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片&。
　　一、为何选择将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片的方法减少HTTP请求数？
　　为什么我会讲解 &将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片& 这一种方式来减少HTTP请求，进而优化页面呢？这里呢，是涉及到移动端的图标使用。上一篇博文所讲的方法能否使用于手机端的网页呢？
　　 但是，它会出现一个问题：背景图+css显示图标时，图标本身无法缩放，比如背景图中64px*64px的图标，显示到界面时必须设置icon的大小也是64*64。在PC网页中这通常不会有什么问题，但在移动端设备上就完全行不通。同样是4英寸的手机屏幕，其分辨率有可能是320*400，也可能是640*800，甚至也可能是。这样64px*64px的图标在不同的设备上看起来的大小就会差别非常明显。
　　幸运的是，手机上的浏览器基本对此做了优化，会把设备模拟成更低的分辨率。比如在的IPHONE 5中获取$(window).width(),取出来的是320而不是640，这样一个宽度为160px的图片占用的是屏幕宽度的一半，而不是1/4。手机设备这样处理是为了解决兼容性问题。除了网页，包括手机上app的界面，在retina屏幕上和非retina屏幕上的大小是完全一样的，都是因为对分辨率做了处理。
　　但是，移动设备这样的处理方式并不能完全解决问题，因为机器的假设性猜测在很多时候是不合适的，尤其是在android设备中。为了更好地控制元素显示的大小，解决的办法就是用pt代替ps，px是对应屏幕的分辨率，而pt是针对人眼睛实际感觉的大小，无论在何种分辨率的设备上，72pt固定是1英寸。
　　HTML的img标签元素的src属性不只是可以指定url，也可以指定图片的二进制数据流。然后通过img元素的自动缩放功能，指定img的大小，就可以实现在不同分辨率的设备上显示一致的图标大小。
　　二、使用Base64编码减少页面请求数
　　当我们的一个页面中要传入很多图片时，特别是一些小图标，十几K、几K，甚至是字节级别大小的小图标，这些小图标都会增加HTTP请求，假如多了，就会给服务器带来很大的压力。比如要下载一些一两K大的小图标，其实请求时带上的额外信息有可能比图标的大小还要大。所以，在请求越多时，在网络传输的数据自然就越多了，传输的数据自然也就变慢了。而这里，我们采用Base64的编码方式将图片直接嵌入到网页中，而不是从外部载入，这样就减少了HTTP请求。当然了，它有一个小缺点，就是使当前页面的大小变大了（对于优化来说，其实这个可以忽略，影响不大）。看一下下图，小图标大小为2.4k，等待响应时间是14ms，而接受数据，也就是下载时间约为0ms；可想而知，在有大量小图标下载的时候，这样的方式去优化能大大提高网站的性能（在jquery mobile和天猫的手机站上面都有用到此技术）。
　　三、开发思路
&　　将小图标放在以icon_开头的文件夹里（以区分不用生成base64的图片的文件夹）&&用程序去遍历文件夹图片 &&将每张图片的base64编码放在一个js对象里&&在HTML页面的img标签里 使用属性 icon-data = '图标名(不带后缀)'来显示图片 && JS文件写一个函数对icon-data属性进行转换，转换成src属性，然后值就通过icon-data的属性值获得图标名，然后进行相应的替换得到相应图标的base64编码 && 显示图片
　　四、代码实现
$pathinfo = pathinfo($_SERVER['SCRIPT_FILENAME']);
define('ROOT', $pathinfo['dirname']);
function generateIcon_mobile() {
$imgRoot = ROOT."/img/mobile";
$iterator = new DirectoryIterator($imgRoot);
foreach ($iterator as $file) {
if ($file-&isDot()) continue;
$filename = $file-&getFilename();
//识别出是否以icon_开头的文件夹，如果是，则对此文件夹的图标进行base64编码处理
if ($file-&isDir() && 0 === strncasecmp('icon_', $filename, 5)) {
generateIconMobileCallback("$imgRoot/$filename", ROOT."/js/mobile");
function generateIconMobileCallback($iconDir, $styleSaveDir) {
//保存成js的文件名
$saveName = array_pop(explode('/', $iconDir));
//JS文件保存路径
$styleSavePath = $styleSaveDir.'/'.$saveName.'.js';
//将当前目录下的所有文件及MD5组成一个识别字符串
$fileMap = array();
$iterator = new DirectoryIterator($iconDir);
foreach ($iterator as $file) {
if ($file-&isDot()) continue;
$fileName = $file-&getFilename();
if ($file-&isDir()) {
generateIconMobileCallback($iconDir.'/'.$fileName, $styleSaveDir.'/'.$fileName);
$fileMap[$fileName] = md5_file($file-&getRealPath());
ksort($fileMap);
$fileMapStr = json_encode($fileMap);
//确保目录可写
ensure_writable_dir($styleSaveDir);
//js文件句柄
$wirteHandle = fopen($styleSavePath, 'w');
//当前小图标文件夹的相对路径
$iconSaveRelative = substr($iconDir, strlen(ROOT));
//写入，初始化保存数据的对象
fwrite($wirteHandle, "/** icon in dir: $iconSaveRelative/ */ \nif(typeof(\$iconData) == 'undefined') \$iconData={};");
foreach ($fileMap as $fileName =& $md5) {
//当前图片的绝对路径
$fullPathName = "$iconDir/$fileName";
//取得路径信息
$pathInfo = pathinfo($fullPathName);
//取得文件名（没有后缀）
$fileNameNoExt = $pathInfo['filename'];
//取得图片信息
$imageSize = getimagesize($fullPathName);
//取得文件的后缀
switch ($imageSize[2]) {
case IMAGETYPE_GIF:
$imageType = 'gif';
case IMAGETYPE_JPEG:
$imageType = 'jpg';
case IMAGETYPE_PNG:
$imageType = 'png';
$imageType = 'jpg';
//取得图片资源
$readHandle = fopen($fullPathName, 'r');
//将图片转成二进制并生成Base64编码
$base64 = base64_encode(fread($readHandle, filesize($fullPathName)));
//关闭资源
fclose($readHandle);
//将Base64编码写入js文件中
fwrite($wirteHandle, "\n\$iconData.$fileNameNoExt=\"data:image/$imageType;base64,$base64\";");
//最后换个行
fwrite($wirteHandle, "\n");
//关闭资源
fclose($wirteHandle);
//处理成功的图标文件夹给予提示
echo '&p&'.$iconSaveRelative. ' saved&/p&';
* 确保文件夹存在并可写
* @param string $dir
function ensure_writable_dir($dir) {
if(!file_exists($dir)) {
mkdir($dir, 0766, true);
@chmod($dir, 0766);
@chmod($dir, 0777);
else if(!is_writable($dir)) {
@chmod($dir, 0766);
@chmod($dir, 0777);
if(!@is_writable($dir)) {
throw new BusinessLogicException("目录不可写", $dir);
generateIcon_mobile();
117 &!DOCTYPE html&
118 &html&
119 &head&
&title&&/title&
121 &/head&
122 &body&
127 &div&我们直接引入所生成的js文件，测试一下是否成功&/div&
129 &div&直接在img标签里加入 icon-data = '图标文件名'
&\img icon-data="tryit"&,查看效果&/div&
&img icon-data="tryit"&
&script src="js/mobile/icon_pink.js"&&/script&
&script src="js/mobile/jquery.all.min.js"&&/script&
&script src="js/mobile/attrHandle.js"&&/script&
137 &/body&
138 &/html&
　　然后这里附上属性转换的JS代码
1 $(function(){
setIconData();
5 function setIconData() {
if (typeof($iconData != 'undefined')) {
$('img[icon-data]').each(function() {
var self = $(this);
var name = self.attr('icon-data');
if (typeof($iconData[name]) != 'undefined') {
self.attr('src', $iconData[name]);
self.removeAttr('icon-data');
　　五、实现效果
　　这是页面输入效果，小图标正常显示出来了
　　这里我们自动生成的JS文件是这样子的格式：
　　页面调用的代码：
　　JS对img的icon-data属性转换处理的代码：
　　我们对比下用base64编码和不用base64时所花费的时间：
　　先看不用的速度
　　再看我们用了base64编码的速度　　　
　　假如一个页面有很多小图标，那么这种方式对网站的性能优化会有大大的提升。如今此种优化方案是用在我现在的项目中移动端，而上一篇博文讲解的生成背景图的优化方案用在我们项目中的PC端。优化效果是很明显的！当然了，base64编码这种方法也可以用在PC端，我们的项目为啥将它用在手机端，本博文开头部分也有对其做解释。这里测试我就直接在PC端测试，手机端测试也是一个样的。
　　这一次就分享那么多给大家，代码我都贴上了，而且很多都标上了注释，方便大家理解。
　　如果此博文中有哪里讲得让人难以理解，欢迎留言交流，若有讲解错的地方欢迎指出。
　　如果您觉得您能在此博文学到了新知识，请为我顶一个，如文章中有解释错的地方，欢迎指出。
　　互相学习，共同进步！
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。主题 : 把图片转成base64字符串，上传过去，服务器不支持图片格式
级别: 新手上路
可可豆: 92 CB
威望: 92 点
在线时间: 34(时)
发自: Web Page
把图片转成base64字符串，上传过去，服务器不支持图片格式&&&
+(NSString *) image2String:(UIImage *)image{
//NSData*pictureData = UIImagePNGRepresentation(image);
NSData* pictureData = UIImageJPEGRepresentation(image,0.5);//进行图片压缩从0.0到1.0（0.0表示最大压缩，质量最低);
NSLog(@"调用了image@String方法");
NSLog(@"%@这个值是什么实现的？",pictureData);
NSString* pictureDataString = [pictureData base64Encoding];//图片转码成为base64Encoding，
NSLog(@"%@++++是空值么？",pictureDataString);
NSLog(@"base64转码，的实验");
return pictureDataS
}
+(UIImage *) string2Image:(NSString *)string{
UIImage *image = [UIImage imageWithData:[NSData dataWithBase64EncodedString:string]];
}
－（void）uploadimage｛
UIImage *newImage = [UIImage imageNamed:@"icon_lol.gif"];
NSString *imageString=[Base64 image2String:newImage];
NSString *post = [[NSString alloc]initWithFormat:@"userid=168&nickname=jiangzheng&mydesc=123&sex=1&province=&city=&area=&headimg=%@",imageString];
NSData *postData = [post dataUsingEncoding:NSUTF8StringEncoding allowLossyConversion:YES];
NSString *postLength = [NSString stringWithFormat:@"%d", [postData length]];
NSMutableURLRequest *request = [[[NSMutableURLRequest alloc] init] autorelease];
[request setURL:[NSURL URLWithString:[[NSString alloc]initWithFormat:@"%@%@",kHostName,kUserUpdate]]];
NSLog(@"request:%@",request);
[request setHTTPMethod:@"POST"];
[request setValue:postLength forHTTPHeaderField:@"Content-Length"];
[request setHTTPBody:postData];
[[NSURLConnection alloc] initWithRequest:request delegate:self];
}
服务器那边报错:011-11-24 15:24:24 org.apache.catalina.core.StandardWrapperValve invoke
严重: Servlet.service() for servlet MVC Servlet threw exception
javax.imageio.IIOException: Unsupported JPEG process: SOF type 0xc3
at com.sun.imageio.plugins.jpeg.JPEGImageReader.readImage(Native Method)
at com.sun.imageio.plugins.jpeg.JPEGImageReader.readInternal(JPEGImageReader.java:1100)
at com.sun.imageio.plugins.jpeg.JPEGImageReader.read(JPEGImageReader.java:915)
at javax.imageio.ImageIO.read(ImageIO.java:1422)
at javax.imageio.ImageIO.read(ImageIO.java:1326)
at org.kutui_mobile.mvc.UserController.userUpdate(UserController.java:194)
级别: 新手上路
可可豆: 320 CB
威望: 320 点
在线时间: 95(时)
发自: Web Page
可能是加号的问题，在BASE64的结果字符串中存在&+&，而&+&以及其它一些特殊字符通过浏览器传递到后台时会被过滤掉，因此&＋&需要特殊处理。
为验证此现象，可以在前后端分别打印BSAE64值，仔细对比每个字符，会发现&＋&传到后台被替换为空格了。
级别: 新手上路
可可豆: 92 CB
威望: 92 点
在线时间: 34(时)
发自: Web Page
我打印出来的2端的结果如下，看不出哪里不一样，而且它们的长度一样： 10:00:35.324 KTiphone[486:207] pictureDataString:/9j/4AAQSkZJRgABAQAAAQABAAD/4QBYRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEqADAAQAAAABAAAAEAAAAAD/2wBDAAYEBQYFB
级别: 新手上路
可可豆: 320 CB
威望: 320 点
在线时间: 95(时)
发自: Web Page
一个简单的检查方式就是将后台收到的字符串，手工拷贝到前台去解码并生成文件，如果失败说明部分字符被替换；或者将前台的字符串手工拷贝到后台解码处理。web开发过程中的过滤字符问题是比较讨厌，我们的一个工程师曾经就被折磨了两天才找到一个隐藏很深的字符。
级别: 新手上路
可可豆: 320 CB
威望: 320 点
在线时间: 95(时)
发自: Web Page
又细看了一下楼主的代码，其中有一段压缩图片的代码：NSData* pictureData = UIImageJPEGRepresentation(image,0.5);//进行图片压缩从0.0到1.0（0.0表示最大压缩，质量最低);尝试此处不要压缩看看效果。
级别: 骑士
可可豆: 1831 CB
威望: 1821 点
在线时间: 184(时)
发自: Web Page
请问楼主在吗？
级别: 新手上路
UID: 479641
可可豆: 53 CB
威望: 35 点
在线时间: 327(时)
发自: Web Page
我的也是这个情况，上传成功，服务器能返回成功返回的路径参数，但是服务器就是没有这张图片
级别: 精灵王
UID: 32307
可可豆: 5649 CB
威望: 5642 点
在线时间: 424(时)
发自: Web Page
没有后续答案了吗
关注本帖(如果有新回复会站内信通知您)
苹果公司现任CEO是谁？2字 正确答案:库克
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 浏览移动版IOS图片转base64字符串和字符串转回图片
UIImage图片转成base64字符串：
UIImage *_originImage = [UIImage imageNamed:@"full_playlist_hl.png"];
NSData *_data = UIImageJPEGRepresentation(_image, 1.0f);
NSString *_encodedImageStr = [_data base64Encoding];
NSLog(@"===Encoded image:\n%@", _encodedImageStr);
Base64字符串转UIImage图片：
NSData *_decodedImageData
= [[NSData alloc] initWithBase64Encoding:_encodedImageStr];
UIImage *_decodedImage
= [UIImage imageWithData:_decodedImageData];
NSLog(@"===Decoded image size: %@", NSStringFromCGSize(_decodedImage.size));转载地址：/mobile/1345414.html
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'为了账号安全，请及时绑定邮箱和手机
如何把图片转换成base64在后台转换成图片放在本地
如何把图片转换成base64在后台转换成图片放在本地
这是新项目中把统计图表导出到文档的小功能，现在写出来方便自己在往后遇到找到。
* 解析base64，返回图片所在路径
* @param base64Info
public String
decodeBase64(String base64Info){
if(StringUtils.isEmpty(base64Info)){
BASE64Decoder decoder = new BASE64Decoder();
String[] arr = base64Info.split("base64,");
//我是把图片放在D盘了
File filePath = new File("D:");
//因为图表的图片后缀是png，所以后台生成的图片也是它了
String picPath = filePath+ "/"+ UUID.randomUUID().toString() +".png";
byte[] buffer = decoder.decodeBuffer(arr[1]);
OutputStream os = new FileOutputStream(picPath);
os.write(buffer);
os.flush();
os.close();
} catch (IOException e) {
throw new RuntimeException();
return picP
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
相关标签：
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
JAVA开发工程师
为了房子，继续努力
作者的热门手记
Copyright (C)
All Rights Reserved | 京ICP备 号-2【前端攻略】：玩转图片Base64编码 - 推酷
【前端攻略】：玩转图片Base64编码
图 片处理在前端工作中可谓占据了很重要的一壁江山。而图片的Base64编码可能相对一些人而言比较陌生，本文不是从纯技术的角度去讨论图片的base64编码。标题略大，不过只是希望通过一些浅显的论述，让你知道什么是图片的base64编码，为什么我们要用它，我们如何使用并且方便的使用它，并让你懂得如何去在前端的实际工作中运用它。
什么是base64编码?
我不是来讲概念的，直接切入正题， 图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。
这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个http请求下载而来的（所有才有了csssprites技术的应运而生，但是csssprites有自身的局限性，下文会提到）。
没错，不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而base64正好能解决这个问题。
那么图片的base64编码长什么样子呢？举个栗子。
的首页搜索框右侧的搜索小图标使用的就是base64编码。我们可以看到：
1 //在css里的写法
2 #fkbx-spch, #fkbx-hspch {
background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-
1 //在html代码img标签里的写法
2 &img src=&data:image/base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=&&
上面分别是图片的base64编码在css里面的写法和在html&img&标签里的写法。base64编码长得就是这个样子，当然base64编码不仅仅运用在图片编码，还可以：
thunder://QUFodHRwOi8vZG93bi5zYW5kYWkubmV0L3RodW5kZXI3L1RodW5kZXI3LjEuNS4yMTUyLmV4ZVpa（ 不要复制我我真的不是种子 ）
嘿嘿没错，迅雷的“专用地址”也是用Base64加密的，有兴趣自行google，不做赘述。
为什么要使用Base64编码？
那么为什么要使用base64:URL传输图片文件？上文也有提及，因为这样可以节省一个http请求。 图片的base64编码可以算是前端优化的一环。效益虽小，但却缺能积少成多。
说到这里，不得不提的是CssSprites技术，后者也是为了减少http请求，而将页面中许多细小的图片合并为一张大图。那么图片的base64编码和CssSprites有什么异同，又该如何取舍呢？
所以，在这里要明确使用base64的一个前提，那就是被base64编码的图片足够尺寸小。以博客园的logo为例：
如下图所示，博客园的Logo只有3.27KB，已经很小了，但是如果将其制作转化成base64编码，生成的base64字符串编码足足有 4406 个。即便base64编码能够被gzip压缩，压缩率能达到50%以上，想象一下，一个元素的css样式编写居然超过了2000个字符，那对css整体的可读性将会造成十分大的影响，代码的冗余使得在此使用base64编码将得不偿失。
那么，是不是表示base64编码无用武之地呢？不然。当页面中的图片满足以下要求，base64就能大显生手。
如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新
。那么此时使用base64编码传输图片就可谓好钢用在刀刃上，思前想后，符合这个规则的，有一个是我们经常会遇到的，就是页面的背景图background-image。在很多地方，我们会制作一个很小的图片大概是几px*几px，然后平铺它页面当背景图。因为是背景图的缘故，所以无法将它放入雪碧图，而它却存在网站的很多页面，这种图片往往只有几十字节，却需要一个http请求，十分不值得。那么此时将它转化为base64编码，何乐而不为？
下面是一个只有50字节的2*2的的背景图。将其转化成base64编码，只有100多个字符，相比一个http请求，这种转换无疑更值得推崇。
CssSprites与Base64编码
简单陈述一下我对何时这使用这两种优化方法的看法。
使用CssSprites合并为一张大图：
页面具有多种风格，需要换肤功能，可使用CssSprites
网站已经趋于完美，不会再三天两头的改动（例如button大小、颜色等）
使用时无需重复图形内容
没有base64编码成本，降低图片更新的维护难度。（但注意Sprites同时修改css和图片某些时候可能造成负担）
使用base64直接把图片编码成字符串写入CSS文件：
无额外请求
对于极小或者极简单图片来
可以被gzip。（通过gzip对base64数据的压缩能力通常和图片文件差不多或者更强）
降低css维护难度
可像单独图片一样使用，比如背景图片重复使用等
没有跨域问题，无需考虑缓存、文件头或者cookies问题 &
更便捷的将图片转化为Base64编码
将图片转化为base64编码有许多工具，例如本文中我所使用的&
& ，但是很多这些网站是国外网站，经常被墙登陆不了。这里介绍一个更为快捷的方法，就是利用Chrome浏览器（我想FEer都应该有Chrome浏览器吧=。=）。
在chrome下新建一个窗口，然后把要转化的图片直接拖入浏览器，打开控制台，点Source，如下图所示，点击图片，右侧就会显示该图片的base64编码，是不是很方便。
原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致