Base64編碼圖片存取與前臺顯示
阿新 • • 發佈:2019-02-10
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");