colorbox是非常优秀的图片显示插件,但最近想用它来显示保存在数据库中的二进制图片却发现问题,就是无法正确显示,显示出来的都是一些乱码字符,究竟问题出在那呢?
于是循例百度了一下,是有人也碰到这个问题,但没有提出解决方案呀!看来只能自己分析原因了。。。
首先说下我的开发环境:ASP.NET MVC+COLORBOX,那问题不是出在MVC就是COLORBOX上了。
1、MVC分析:
无论图片保存数据库还是保存在目录文件,都是无非转换为二进制流返回比浏览器,于是我试下用COLORBOX显示保存在某个目录下的图片,输入测试网址:http://localhost:6234//Images/010806cjierech73n727j2.jpg,结果是完全问题呀!于是再通过浏览器输入网址:http://localhost:6234/Mminfor/GetThereImageToView/34251,显示保存在数据库中的图片,也完全没问题呀!
因此,问题出在MVC上的可能性不大。
2、COLORBOX分析:
为什么直接在浏览器上显示没问题,而在jqurey上的插件COLORBOX显示就出问题呢?
首先从HTTP的响应头入手分析吧。
直接显示保存在目录文件下的HTTP响应头如下:
HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Sun, 14 Sep 2014 07:44:00 GMT
X-AspNet-Version: 4.0.30319
Cache-Control: public
ETag: "1CFCFEF4F346180"
Content-Type: image/jpeg
Content-Length: 155988
Connection: Close
而显示保存在数据库中的二进制图片的HTTP响应头如下:
HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Sun, 14 Sep 2014 07:46:03 GMT
X-AspNet-Version: 4.0.30319
X-AspNetMvc-Version: 4.0
Content-Type: image/jpeg
Content-Length: 155988
Connection: Close
从对比来看,二者的区别是一个响应头标识:ETag。于是用Response.AppendHeader方法把这个头标识加上再测试,但还是不行呀(后来百度了一下,“ETag”这个标识头是用于缓存的)。
既然响应头没发现到问题,于是再从发送头分析吧!
直接显示保存在目录文件下的HTTP发送头如下:
GET http://localhost:6234/Images/010806cjierech73n727j2.jpg HTTP/1.1
Host: localhost:6234
Connection: keep-alive
Accept: image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
Referer: http://localhost:6234/Mminfor/EditForumData
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,zh-TW;q=0.4
而显示保存在数据库中的二进制图片的HTTP响应头如下:
GET http://localhost:6234/Mminfor/GetThereImageToView/34617 HTTP/1.1
Host: localhost:6234
Connection: keep-alive
Accept: text/html, */*; q=0.01
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
Referer: http://localhost:6234/Mminfor/EditForumData
Accept-Encoding: gzip,deflate,sdch
我靠!终于发现问题了:
二者的区别原来在这个发送头标识:Accept,既然找到问题所在,剩下的问题就是如何把发送头标识Accept变为:Accept: image/webp,*/*;q=0.8的问题了。
下面是我解决该问题的一个方法(也许不是好方法,但大家可以参考一下):
把显示图片的原来网址:http://localhost:6234/Mminfor/GetThereImageToView/34617改为:
http://localhost:6234/Mminfor/GetThereImageToView/34617.jpg(当然你要显示的图片格式是gif、png、bmp也可改为对应的),至于服务器端如何提取参数值“34617”我就不再累述了(无法是字符串截取、类型转换嘛)。
为什么在网址后面加个“.jpg”扩展名就能把“Accept”标识头变为:Accept: image/webp,*/*;q=0.8了呢?我认为是浏览器的智能判断该网址的目的就是获取图片的吧,于是就把“Accept”标识头变为:Accept: image/webp,*/*;q=0.8了,这样图片二进制数据返回后COLORBOX就知道按图片而非字符来显示了。
从另一角度来看,这也算是COLORBOX要改进的一个地方吧,因为它没有浏览器那么智能,能通过返回的二进制流(文件头)来判断究竟该显示图片还是字符。