1. 程式人生 > >Base64編碼圖片存取與前臺顯示

Base64編碼圖片存取與前臺顯示

String base64str=new String(log.getRequest_imgdata());//log為實體 括號裡面是影象的get方法 返回為Byte[]型
String new str=new String("\"data:image/jpg;base64,"+base64str+"\"");//拼裝Base64字串頭
response.getWriter().write(newstr);//將完整Base64字串返回前臺

前臺Js:

var srcUrl = appJP.urlReqImg +"?log_id="+row.log_id;//請求URL
        $.get(srcUrl,function
(data){ var imgWindow = $("#imgDetail").html("<img src="+data+">");//接收Base64字串,並轉換為圖片顯示 $("#showImg").window({title:"圖片詳情",width:"auto"}).window("open").window("center"); })

以上已實現從資料庫取出BLOB型別Base64影象資料(Java中為byte[])轉換為字串,併發送至前臺顯示

但是在測試中發現稍微大一點的影象(幾百KB)在部分IE瀏覽器中不能顯示,查詢資料發現是IE8以下對Base64解碼長度限制的問題

解決方案:更換後臺到前臺傳輸影象資料形式為流的形式

後臺:  

複製程式碼
String base64str=new String(log.getRequest_imgdata());
BASE64Decoder decoder=new BASE64Decoder();
byte[] imgbyte=decoder.decodeBuffer(base64str);//解碼Base64圖片資料
response.setContentType("image/jpeg");
ServletOutputStream outputStream = response.getOutputStream();
outputStream.write(imgbyte);
outputStream.flush();
複製程式碼

前臺js:

var srcUrl = appJP.urlReqImg +"?log_id="+row.log_id;
var imgWindow = $("#imgDetail").html("<img src="+srcUrl+">");
$("#showImg").window({title:"圖片詳情",width:"auto"}).window("open").window("center");