base64编码的图片在HTML的img控件中显示

时间:2022-04-22 09:18:48

最近在做一个移动web app项目的开发,将客户经理与客户的聊天功能搬到手机中(类似微信聊天),其中客户经理的头像由原电脑端的聊天项目组同事提供。他们保存在数据库中的图片信息为varbinary类型的数值,也就是以二进制数据保存。自己写了个根据客户经理的ID查找其头像信息的接口(即中台wcf服务),将这个varbinary值读取出来,通过日志中记录的这些值的形式,发现是base64编码的方式。于是就有了之后的研究,就是将base64编码的图片显示的问题:

方法①:<img>控件

<img alt="头像" src="../Handler/GetPhoto.ashx?AgentID=×××" > 后台代码GetPhoto.ashx中,将获取到的base64编码的值做如下转换:
         byte[] image = Convert.FromBase64String(result);
//context.Response.ContentType = "image/png" 看网上别人博客写的一般都会加上这句话,没有加也能显示,具体的原理就不清楚了。
       context.Response.BinaryWrite(image);
其中result即为从数据库中获取到的varbinary类型的数据值保存为byte[]类型返回的结果。至此,前端界面的<img>控件调用该后台代码即可显示相应的图片。
(此段可以不看!该项目wcf服务中,接口加上了WebGet方式,就是为了实现通过http方式访问来调用接口,使用restful风格来访问接口。后来项目实际投产过程中,发现js中通过http方式调用接口行不通,
因为外部网络无法直接访问内部的中台wcf服务所在的服务器,这个之前真是没想到啊!!实际就是因为js文件相当于直接下载到本地来执行的,内部的中台服务器不允许开通外网访问的权限(网络限制比较严格),
所以不能直接访问的,故为了不让之前写的所有接口浪费掉,又在中间包装了一层handler(.ashx),写下这段也主要是为了引以为戒,做好设计工作很重要,另外估计也会有人疑惑为什么中台又是handler
,又是wcf的。)
方法②:<img>控件

<img src="data:image/png;base64,具体的编码值(即①中的result)">同样可以展示

该方法得益于他人的一篇文章,原文地址:玩转图片base64编码


附:wcf服务的相关笔记

wcf服务中加上webget,就可以用http的方式访问该服务,也是本项目wcf服务采用的做法。
例如:
       [OperationContract]
       [WebGet(
UriTemplate="/QryData/{id}")]       Stream QryData(string ID);即可通过
http://localhost:×××/Services/×××.svc/QryData/a 来获取a的相关内容。

本人才疏学浅,如有不正确的地方,希望各位大大们批评指正,谢谢!成长的路上,有你们的指点,才会更好。base64编码的图片在HTML的img控件中显示