html img Src base64 图片显示
http://blog.csdn.net/knxw0001/article/details/10983605
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么这是什么呢?这是Data URI scheme。
Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片。
在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
目前,Data URI scheme支持的类型有:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘wg.png’));
目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
举个图片的例子:
网页中一张图片可以这样显示:
<img src=“http://www.letuknowit.com/images/wg.png”/>
也可以这样显示:
<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>
我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍。
http://www.w3dev.cn/article/20110214/asp-net-csharp-image-base64-change.aspx
如果能将图片转换为base64编码,结合图片的新写法data:images/gif;base64,base64数据,就能使用ajax请求动态页获取base64编码,然后设置img为base64编码即可实现ajax无刷新获取图片信息了。
一般意义上是不需要使用ajax来获取图片信息的,用JavaScript设置img标签的src属性即可实现无刷新获取到图片,只是浏览器会出现进度条而已。如果要想使用ajax来无刷新获取图片信息,并且更新img标签,就需要动态页将图片编码为base64返回,然后ajax获取返回的信息设置img的src为data:images/gif;base64,base64数据即可。
下面为asp.net-C#图片-base64编码互转源代码
//代码来源于:http://blog.csdn.net/marquess/archive/2008/07/29/2732629.aspx
//图片转为base64编码的字符串
protected string ImgToBase64String(string Imagefilename)
{
try
{
Bitmap bmp = new Bitmap(Imagefilename);
MemoryStream ms = new MemoryStream();
bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
byte[] arr = new byte[ms.Length];
ms.Position = 0;
ms.Read(arr, 0, (int)ms.Length);
ms.Close();
return Convert.ToBase64String(arr);
}
catch (Exception ex)
{
return null;
}
}
//base64编码的字符串转为图片
protected Bitmap Base64StringToImage(string strbase64)
{
try
{
byte[] arr = Convert.FromBase64String(strbase64);
MemoryStream ms = new MemoryStream(arr);
Bitmap bmp = new Bitmap(ms);
//bmp.Save("test.jpg", System.Drawing.Imaging.ImageFormat.Jpeg);
//bmp.Save("test.bmp", ImageFormat.Bmp);
//bmp.Save("test.gif", ImageFormat.Gif);
//bmp.Save("test.png", ImageFormat.Png);
ms.Close();
return bmp;
}
catch (Exception ex)
{
return null;
}
}
html img Src base64 图片显示的更多相关文章
- base64图片显示问题
1.问题描述 小程序项目需要后端接口提供base64流的图片,对于H5的语法,前面拼接后面的代码即可: data:image/png;base64, 先看后台代码: @RestController @ ...
- #ZgotmplZ go web 开发 base64 图片显示
Go Web开发,用Base64作为图片URL时遇到#ZgotmplZ的问题 - 简书 https://www.jianshu.com/p/54fc25da7c4f // var imgBase64 ...
- Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案
Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成 ...
- MVC显示Base64图片
本篇演示ASP.NET MVC应用程序,显示Base64图片. Insus.NET浏览网页,发现一个站点http://www.base64-image.de/ 想起以前也有实现过<如何把数据流转 ...
- img src 使用 base64 图片数据
img src 使用 base64 图片数据 在网页上显示一张图片通常是 <img src="xxx.png" > 或 <img src="www.ur ...
- flutter 显示base64 图片
后台返回base64 为了本地显示需要转换成Uint8List 1.导入包 import 'dart:convert';2.后台返回base64 格式不被识别需要切分 //'"data:im ...
- base64图片在各种浏览器的兼容性处理
IE浏览器目前最高的版本是v11,而微软放弃了IE,转向新的浏览器开发,并取名为Edge.base64图片在IE9及以后的图片均能显示没有问题,而Firefox, Chrome, Safari等非IE ...
- 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间
现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...
- 使用freemarker生成word、html时图片显示问题
使用freemarker生成word.html时图片显示问题 博客分类: Java 使用freemarker生成word时图片显示问题使用freemarker生成html时图片显示问题使用iText生 ...
随机推荐
- ComboTree( 树型下拉框) 组件
本节课重点了解EasyUI中Tree(树)组件的使用方法, 这个组件依赖于Combo(下拉框)和 Tree(树)组件.一. 加载方式//class 加载方式<select id="cc ...
- Sass插值、注释、数剧类型、字符串、值类型
插值#{}使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系.比如说你想写更干净的.高效的和面向对象的 CSS.Sass 中的插值(Interpolation)就是重要 ...
- Canvas--2
Canvas2(关键词:setLineDash .rect .strokeRect .clearRect .arc.sin .strokeText ) 绘制其他样式: lineCap 结束端点的设 ...
- 验证码 Demo
//设置响应头 response.setCharacterEncoding("image/jpeg"); int width=160; int height=40; Buffere ...
- How can I save HICON to an .ico file
refer:http://stackoverflow.com/questions/2289894/how-can-i-save-hicon-to-an-ico-file answer1: #inclu ...
- C# 获取计算机 信息
/// <summary> /// 获取本机 机器名 /// </summary> /// <returns></returns> public sta ...
- TreeMap Red-Black tree
本文以Java TreeMap为例,从源代码层面,结合详细的图解,剥茧抽丝地讲解红黑树(Red-Black tree)的插入,删除以及由此产生的调整过程. 总体介绍 之所以把TreeSet和TreeM ...
- 学习如何写PHP MVC框架(1) -- 路由
说到PHP开发web,自然离不开开发框架,开发框架为我们提供了灵活的开发方式,MVC层分离,业务解耦等... 第一篇先来简单点的,说说MVC框架的路由功能... 一般的单入口框架路由都是这样的结构: ...
- ./configure 时候报错c++ 编译器不能执行
./configure时报错:configure: error: C++ compiler cannot create executables .哎,今天重装测试服务器上的系统,设置好IP可以远程访问 ...
- JVM调优总结 + jstat 分析(转)
[转] JVM调优总结 + jstat 分析 JVM调优总结 + jstat 分析 jstat -gccause pid 1 每格1毫秒输出结果jstat -gccause pid 2000 每格2秒 ...