需求:将Base64编码图片以BLOB类型存入数据库,需要时取出显示

后台:

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");

Base64编码图片存取与前台显示的更多相关文章

  1. Delphi 读取 c# webservice XML的base64编码图片字符串转化图片并显示

    Delphi 读取 c# webservice XML的base64编码图片字符串转化图片并显示 在 开发中遇到应用c#及asp.net的在的webservice 保存图片并以xml文件形式现实出来 ...

  2. VUE Base64编码图片展示与转换图片

    图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址,使用 base64 传输图片文件可以节省一个 http 请求,图片的 base64 编码可以算是前端优化的一 ...

  3. 前端上传 base64 编码图片到七牛云存储

    参考文档 如何上传base64编码图片到七牛云 调试过程 文档中分别有 java 和 html 的 demo,可以根据文档示例调试. 下面是我调试的过程,可以作为参考,特别注意的是,如果需要给文件起名 ...

  4. 保存BASE64编码图片

    1.前端上传用户图片时,一些K数较小图片,头像图标等 .以bass64编码后的字符串传到服务器. 2.服务器接收并保留到本地. // 页面上点击保存 $.post('/imgupload/save', ...

  5. 如何上传base64编码图片到七牛云

    接口说明 POST /putb64/<Fsize>/key/<EncodedKey>/mimeType/<EncodedMimeType>/crc32/<Cr ...

  6. Base64编码 图片与base64编码互转

    package com.education.util; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import jav ...

  7. 博客使用base64编码图片测试

    为了解决发博客时需要先要上传,所以查了一下这个方法 1.把本地图片转为base64编码的字符串, 网上有很多提供这个功能的网站,转换后像这样 data:image/jpeg;base64,/9j/4A ...

  8. 接口上传base64编码图片

    package com.*.util; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io. ...

  9. [转]关于CLOB存储Base64图片编码,直接在前台显示解决方案

    转至:http://ouapi.com/tool/imgtob 两种方案: Base64在CSS中的使用 .yanshishuxing{ background-image: url("dat ...

随机推荐

  1. JS判断两个数字的大小

    javascript中定义的var类型是弱类型,默认是String类型,在比较两个数字大小的时候默认比较的是两个字符串,比如,在比较10和2时,按数字做比较10是比2大,可是按默认的字符串比较时,第一 ...

  2. sublime Text3安装 markdownediting 报错 解决记录

    看了一下官方文档,也是醉了,都怪自己的无知. 在安装时候不要打开.md的文件,因为你里面有可能有一些语法错误,所以会导致报错. 解决方法关闭其他文件,在重新安装! 官方解释: 参考文档:Trouble ...

  3. 用JavaScript获取URL参数的方法之一

    若地址栏URL为:abc.html?m=tomms&c=allsearchlist&pageNo=1&pageNum=20&text=1 <script> ...

  4. PhpStorm中无法用post提交的解决方案

    这是一个简单的计算器,html页面: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. python教程(八)·文件操作

    由于离高考越来越近,博主打算本篇文章过后,暂停本系列教程的更新,等到高考完后再继续本系列教程,请谅解! 这次我们学习用python操作文件,包括文件的读.写等-- 操作文件第一步--打开文件 要想操作 ...

  6. ubuntu18 安装apache2.4 php5.6 mysql5.6

    源码包下载: 链接:https://pan.baidu.com/s/1uoVMy_QNyR_zqVi06QPqKg 提取码:ll7s 注意:    ubuntu安装:sudo apt-get inst ...

  7. MLT的学习理解

    MLT的学习理解 MLT是一个开源的多媒体库,我们的音视频编辑工具,是使用它作为底层支持,某司的'快剪辑'pc版和安卓版,也是用的它. MLT简介 它的GitHub地址,这个库比较老了,现在只有一个作 ...

  8. Xilinx与modelsim的仿真联调

    关于Xilinx与modelsim的仿真联调,尤其是仿真环境的搭建,网上的信息都比较零散,我当初在联调的时候遇到比较多的问题,也是折腾了两天才弄好,下面的步骤我总结得非常详细,可以帮助大家少走弯路. ...

  9. node从搭建运行项目整体流程

    1. 初始化配置基本信息: npm init (自定义配置) npm init -y (一切配置采用默认值) 在当前目录产生package.json文件,有一个dependencies用来记录该项目所 ...

  10. Flex4中的拖动技术

    下面列一个最简单的例子,在Flex中,拖动原来如此简单 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <?xm ...