我将一个图片转换成byte[]形式，现在要用JS将byte[]转成显示在页面上，麻烦哪位知道的告知一下，谢谢-Web开发/JavaScript-javascript-电脑编程网我将一个图片转换成byte[]形式，现在要用JS将byte[]转成显示在页面上，麻烦哪位知道的告知一下，谢谢-Web开发/JavaScript作者：molu311　和相关&&就是将原图显示在页面上，不过有的只是一个byte[]，怎么做，谢谢。------回答---------------其他回答（40分）---------
图片怎么转成byte[]，我想知道
相关资料：｜｜｜｜｜｜｜我将一个图片转换成byte[]形式，现在要用JS将byte[]转成显示在页面上，麻烦哪位知道的告知一下，谢谢-Web开发/JavaScript来源网络，如有侵权请告知，即处理！编程Tags：　　　　　　　　　　　　　　　　&　　　　　　　　　　　　　　　　　　　　 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
通过文件流读取本地图片显示在JSP页面方法
下载积分：1500
内容提示：通过文件流读取本地图片显示在JSP页面方法
文档格式：PDF|
浏览次数：320|
上传日期： 19:30:45|
文档星级：
该用户还上传了这些文档
通过文件流读取本地图片显示在JSP页面方法
官方公共微信&*本事例主要讲了如下几点:
&* 1:将图片转换为BASE64加密字符串.
&* 2:将图片流转换为BASE64加密字符串.
&* 3:将BASE64加密字符串转换为图片.
&* 4:在jsp文件中以引用的方式和BASE64加密字符串方式展示图片.
首先看工具类:
import java.awt.image.BufferedI
import java.io.ByteArrayInputS
import java.io.ByteArrayOutputS
import java.io.F
import java.io.IOE
import java.io.InputS
import javax.imageio.ImageIO;
import sun.misc.BASE64D
import sun.misc.BASE64E
* @author IluckySi
public class ImageUtil {
private static BASE64Encoder encoder = new sun.misc.BASE64Encoder();
private static BASE64Decoder decoder = new sun.misc.BASE64Decoder();
* 将图片转换为BASE64加密字符串.
* @param imagePath 图片路径.
* @param format 图片格式.
public String convertImageToByte(String imagePath, String format) {
File file = new File(imagePath);
BufferedImage bi =
ByteArrayOutputStream baos =
String result =
bi = ImageIO.read(file);
baos = new ByteArrayOutputStream();
ImageIO.write(bi, format == null ? &jpg& : format, baos);
byte[] bytes = baos.toByteArray();
result = encoder.encodeBuffer(bytes).trim();
System.out.println(&将图片转换为BASE64加密字符串成功！&);
} catch (IOException e) {
System.out.println(&将图片转换为 BASE64加密字符串失败: & + e);
} finally {
if(baos != null) {
baos.close();
} catch (Exception e) {
System.out.println(&关闭文件流发生异常: & + e);
* 将图片流转换为BASE64加密字符串.
* @param imageInputStream
* @param format 图片格式.
public String convertImageStreamToByte(InputStream imageInputStream, String format) {
BufferedImage bi =
ByteArrayOutputStream baos =
String result =
bi = ImageIO.read(imageInputStream);
baos = new ByteArrayOutputStream();
ImageIO.write(bi, format == null ? &jpg& : format, baos);
byte[] bytes = baos.toByteArray();
result = encoder.encodeBuffer(bytes).trim();
System.out.println(&将图片流转换为BASE64加密字符串成功！&);
} catch (IOException e) {
System.out.println(&将图片流转换为 BASE64加密字符串失败: & + e);
} finally {
if(baos != null) {
baos.close();
} catch (Exception e) {
System.out.println(&关闭文件流发生异常: & + e);
* 将BASE64加密字符串转换为图片.
* @param base64String
* @param imagePath 图片生成路径.
* @param format 图片格式.
public void convertByteToImage(String base64String, String imagePath, String format) {
byte[] bytes =
ByteArrayInputStream bais =
BufferedImage bi =
File file =
bytes = decoder.decodeBuffer(base64String);
bais = new ByteArrayInputStream(bytes);
bi = ImageIO.read(bais);
file = new File(imagePath);
ImageIO.write(bi, format == null ? &jpg& : format, file);
System.out.println(&将BASE64加密字符串转换为图片成功！&);
} catch (IOException e) {
System.out.println(&将BASE64加密字符串转换为图片失败: & + e);
} finally {
if(bais != null) {
bais.close();
} catch (Exception e) {
System.out.println(&关闭文件流发生异常: & + e);
然后看测试类：
import java.io.InputS
import com.ilucky.util.image.ImageU
* 本事例主要讲了如下几点:
* 1:将图片转换为BASE64加密字符串.
* 2:将图片流转换为BASE64加密字符串.
* 3:将BASE64加密字符串转换为图片.
* 4:在jsp文件中以引用的方式和BASE64加密字符串方式展示图片.
* @author IluckySi
public class MainTest {
public static void main(String[] args) {
ImageUtil imageUtil = new ImageUtil();
String base64String = imageUtil.convertImageToByte(&D:\\test.png&, &png&);
System.out.println(base64String);
imageUtil.convertByteToImage(base64String, &D:\\test2.png&, &png&);
InputStream is = MainTest.class.getResourceAsStream(&test.png&);
String base64String2 = imageUtil.convertImageStreamToByte(is, &png&);
System.out.println(base64String2);
imageUtil.convertByteToImage(base64String2, &D:\\test3.png&, &png&);
最后看jsp文件:
&!DOCTYPE html&
&title&index.html&/title&
&meta http-equiv=&keywords& content=&keyword1,keyword2,keyword3&&
&meta http-equiv=&description& content=&this is my page&&
&meta http-equiv=&content-type& content=&text/ charset=UTF-8&&
data表示取得数据的协定名称,image/png是数据类型名称,base64 是数据的编码方法,
逗号后面是image/png文件base64编码后的数据.
data:text/base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/base64,base64编码的Javascript代码
data:image/base64,base64编码的gif图片数据
data:image/base64,base64编码的png图片数据
data:image/base64,base64编码的jpeg图片数据
data:image/x-base64,base64编码的icon图片数据
&img src=&test.png&/&
&img src=&data:image/base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFYklEQVR42sVXfUyUdRz/8XKhMZQO
7nmeuwMFwrBEVJqgDOcUHZvNuTarrdKam0zdKrckAy4goowxbaM5hE1yjVVzLjLRokBFz2qsQPGF
F8vmamtkL4s4OHDy6ff5EQcXx91hf/jHB777fj8v3+d57p7nOQFA3EuoPxcLhV90SlxziOSeUrHd
WRz5fv1uc1fl03OGizdGgmBd/5K5mzNyyO0M4EkEXqBAiI58Ed9WEFp1+MXYm1vW68hKM7AwJR5W
mx3RZqsCa/Y4I4dcaqilx10t0PGqCOssEjuvH7H9vW1zEgzNgK5ZYVh02HUN86w65tvGwJo9zhRH
cqmhlh70mtEC7a8Ie2ep6dPfW5eM3OnbhMo9S6GbLV6h04Eccqmhlh70omdQC3TsFbbLZaYL/W2Z
wA+PYbQ9B780rUJu1nxoMZaAC5BDLjXU0oNe9KS33wXkqRKXXguv+as1HejOxYhzNdwS+G4NjlUs
U0cX7+cscEYOudRQSw960ZPezPC9QIE69dv6Pk4exLX1GDm/Cu5z2Qojzmy4WrOxZUOSPELNz9Fr
ikMuNR699KInvZkx/sH0WqB9rzCuH5j7Mzrk1uel8HQW3GcmgK+y4axOR0qCVX7gpoazxxk55E7W
0oue9GYGs7wXKFCnP7+/cdEovs7GUHMm3C0rvHD7jMTZFSjYugAW89RvAXuckUPuf/X0pDczmMVM
zwJyI8v3lVFX7pzLxMiXGXB/sdwncDoDvfXLkJFqh1WbuBSs2eOMnOn09GYGs5g5eYHcXw/HAWcz
MfRZOtwSQz7APloexcHdD0GLnVhAlzV7nPnT8j8zmMVMzwKdjtCy/qPJuN0kSY1L/OL250tw61ga
Nqy0Q7doCqzZ4yygXmYwi5meBa6Wmk4NNaRgpDEVQ8cX+YVbAk2L0VCcrL52BGv23AG0hMqQWcz0
LNBTHtGFkw9D4UQQkLxR+X/LujiF0RMz0xIqc3yBb4sifmp+80G0lCcFhWYJZ0USDu6ar8C6OUit
0sssZnoWaNhh+tFqGIg3dM9p9QvJM5t1vP1cvALrmWiZxUzPAidfMLWlJBjqZhKMiRarY+UiAzer
5ymwZi8Y7dgNywAzPQuc3xNet3Ypv8+Bn3Y0sUqTQ3k24MM4BdZW3f9zYuKeoYNZzPQscNkRsv35
1WbExhoBDXT5zN+4XMcfNVYMv2dTYM0eZ4H0zGAWMz0L9JaK1P1PRQ7EWa0Bn3aJdh2NL2vAEQ2u
2jGwZo+zQHq7zJBZrusyc9IZEOEX8sM/yFxokafI8LO9jrx1GgaqY+CujYHr0BhYs5eXoynO9Kff
ADOc+eEfyUyT19Owp0SsKd0U5eYrlU+xvMaLk3S0OcxAbTRcB73BHmdpSWNcn5dPejNDZq2d8jiW
G4W07Q39JCctVr3T+br2ZY+bcac6CoPvzoGryhvscUaOr88CPenNDGb5fCPqKha2o3kRF1MTKfA+
+uxHNNx4IwrDVZFwveMbnJFD7uSzQC960psZft8Je4rFkzXPzh5eME+HTTfUs94mbxx1W+cCVbMw
uH82XNOAM3LIpUZppQe96EnvoN6K5TXaVfPMbCxO1BAVbeCJzBj89tYsDO+/DwOVEX5BDrmbpYZa
etCLnkG/ll8qEqK7WOQe32lybs54AKd23I/RA+EYqDAFBXJPSg219KAXPWf8y+iKQxhXHaLyRklI
363yUAzsC8OghGtfqE9wRg651FBLj7v/aTb+ul4oUi4VipIuh+i+WSKG+spC8Gd5CPr/BWv2OJOc
Hsl9XWoW/v/fht5LhLUXiARZb71cJOquFIlv5BH2EqzZ40xyEsm9OJMfp/cS/wC6xRqbyM2GFQAA
AABJRU5ErkJggg==&/&
部署项目，启动服务器,访问jsp页面,会看到浏览器上有两张一样的图片.
&&您还没有登录，点击这里或之后才能回复！
浏览数: 982
分享时间: 4 个月 前上一篇博客是从数据库中读取图片的二进制信息流然后显示到JSP页面上，下面是将图片存储到我的本地磁盘E中，然后在数据库中只存图片的名字将磁盘的路径写到配置文件中，从配置文件中将地址读取出来，图片显示的流程与前一篇博客的一样，只不过图片存储的地方不一样。下面来展示我的实现流程.（1）数据库中只保存图片的id和名字，我用的是oracle数据库，id是自增的，至于如何建表实现id自增等，我已经有博客介绍过这个，这里我展示下我自己写了一个工具类用来建表.&span style=&font-family:Comic Sans MS;&&public class CreTableUtil {
* @param tableName
public void create(String tableName,JdbcTemplate jdbcTemplate){
jdbcTemplate.execute(&create table &+tableName+&(photo_id int,photo_data blob,photo_name varchar2(100),primary key(photo_id))&);
* @param seq
* 创建序列
public void createSequence(String seq,JdbcTemplate jdbcTemplate){
String create_seq=&create sequence &+seq +& start with 1 &
+ &increment by 1 minvalue 1 maxvalue 999999 nocycle nocache&;
jdbcTemplate.execute(create_seq);
* 为id设置自增
public void idIncrement(String tablename,String seq,JdbcTemplate jdbcTemplate){
String sql=&insert into &+ tablename+&(photo_id) values(&+seq+&.NEXTVAL)&;
jdbcTemplate.execute(sql);
* 创建触发器
public void create_trigger(String tablename,String seq,String triggerName,JdbcTemplate jdbcTemplate){
String creat_trig=&create
trigger &+triggerName+& before insert on &+tablename+& for each row begin select &+seq+&.NEXTVAL into :new.photo_&;
jdbcTemplate.execute(creat_trig);
}&/span&2）使用mybatis的generatorConfig.xml自动生成DAO类，至于生成过程我在之前也已经介绍过了。& & & 最后生成的 PhotoModel类如下：&span style=&font-family:Comic Sans MS;&&public class PhotoModel {
private BigD
public BigDecimal getId() {
public void setId(BigDecimal id) {
public String getName() {
public void setName(String name) {
this.name =
}&/span&PhotoModelDAO如下：&span style=&font-family:Comic Sans MS;&&public interface PhotoModelDAO {
int deleteByPrimaryKey(BigDecimal id);
int insert(PhotoModel record);
int insertSelective(PhotoModel record);
PhotoModel selectByPrimaryKey(BigDecimal id);
int updateByPrimaryKeySelective(PhotoModel record);
int updateByPrimaryKey(PhotoModel record);
}&/span&自己创建的Service接口 ：IPhotoModelService&span style=&font-family:Comic Sans MS;&&public interface IPhotoModelService {
int insert(String pName);
public PhotoModel getPhotoById(BigDecimal photoId);
}&/span&Service实现类如下：&span style=&font-family:Comic Sans MS;&&@Service(&photoModelService&)
public class PhotoModelServiceImpl implements IPhotoModelService{
PhotoModelDAO photoModelDAO;
public int insert(String pName) {
PhotoModel pm=new PhotoModel();
pm.setName(pName);
return photoModelDAO.insert(pm);
public PhotoModel getPhotoById(BigDecimal photoId) {
return photoModelDAO.selectByPrimaryKey(photoId);
}&/span&（3）将图片输出到JSP页面上和将数据库读出出来的信息转换成json字符串传递到前台&span style=&font-family:Comic Sans MS;&&@Controller
@Configuration
@ImportResource(&classpath:spring.xml&)
@RequestMapping(&/showPicture&)
public class PhotoModelController extends HttpServlet{
private static final long serialVersionUID=02821L;
@Value(&${picUrl}&)
String picU
private IPhotoModelService photoModelS
@RequestMapping(&/toPicShow&)
public String toPicShow(){
return &waterfullPic&;
//根据请求的路径中的参数id,从本地磁盘中读取图片，picUrl是从配置文件中读取出来的
@RequestMapping(&/tofindPic&)
public void picToJSP(@PathParam(&id&)int id,HttpServletRequest request,HttpServletResponse response){
PhotoModel photoModel=photoModelService.getPhotoById(new BigDecimal(id));
String photoName=photoModel.getName();
FileInputS
response.setContentType(&application/octet-charset=UTF-8&);
//图片读取路径
//in=new FileInputStream(&E:\\picture\\&+photoName);
&strong&&span style=&color:#cc0000;&&in=new FileInputStream(picUrl+photoName);&/span&&/strong&
int i=in.available();
byte[]data=new byte[i];
in.read(data);
in.close();
OutputStream outputStream=new BufferedOutputStream(response.getOutputStream());
outputStream.write(data);
outputStream.flush();
outputStream.close();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
//从数据库中读取信息转换成json格式传递到前台
@RequestMapping(&/picToJsonReturn.do&)
@ResponseBody
public String picToJsonReturn(HttpServletRequest request,Model model){
System.out.println(&aaaaa&);
JSONArray jsonArray=new JSONArray();
for(int i=10;i&31;i++){
PhotoModel p=photoModelService.getPhotoById(new BigDecimal(i));
jsonArray.add(p);
return jsonArray.toString();
&/span&（4）前台页面显示图片&span style=&font-family:Comic Sans MS;&&&body&
&div id=&main&&
&div class=&pin&&
&div class=&box&&
&!-- 通过从数据库中读出图片的二进制信息流显示图片的Controller处理路径 --&
&img src=&/Login_ssm_mav_picbyte/user/toLookImage?id=13&&
--& &!-- 注意这里的访问路径是正确的是，之前因为在web.xml文件中写成了png,所以折腾了很久 --&
&!-- 通过从本地E盘读取图片显示图片 --&
&img src=&/Login_ssm_mav_picbyte/showPicture/tofindPic?id=10&&
&div class=&pin&&
&div class=&box&&
&!-- &img src='/Login_ssm_mav_picbyte/static/pic/img2.jpg'& --&
&img src=&/Login_ssm_mav_picbyte/showPicture/tofindPic?id=11&&
&div class=&pin&&
&div class=&box&&
&img src=&/Login_ssm_mav_picbyte/showPicture/tofindPic?id=12&&
&div class=&pin&&
&div class=&box&&
&img src=&/Login_ssm_mav_picbyte/showPicture/tofindPic?id=13&&
&div class=&pin&&
&div class=&box&&
&img src=&/Login_ssm_mav_picbyte/showPicture/tofindPic?id=14&&
&/body&&/span&waterfull.js代码如下：&span style=&font-family:Comic Sans MS;&&window.onload=function(){/*当页面加载的时候调用函数*/
setInterval(function(){window.onscroll
= sscroll();},1000);
waterfall('main','pin');
window.onscroll=sscroll();
/*之前将函数写在里面时一直实现不了，现在这样写在外面便可以了。*/
function sscroll(){
//原来要把变量定义在这里，之前定义在外面，就会出现undefined的错误
async:false,
type:'get',//get是获取数据，post是带数据的向服务器发送请求
//url:'addAction.do',
url:'picToJsonReturn.do',
dataType:'json',
success:function(data){
pic=eval(data);//转换成js对象
error:function(data){
alert(&JSON数据获取失败，请联系管理员！&);
var dataInt={'data':[{'src':'img1.jpg'},{'src':'img2.jpg'},{'src':'img3.jpg'},{'src':'img4.jpg'},{'src':'img5.jpg'},{'src':'img6.jpg'}]};
if(checkscrollside()){
var oParent=document.getElementById('main');
for(var i=0;i&pic.i++){
var oPin=document.createElement('div');//添加元素节点
oPin.className='pin';
oParent.appendChild(oPin);
var oBox=document.createElement('div');
oBox.className='box';
oPin.appendChild(oBox);
var oImg=document.createElement('img');
//oImg.src='/Login_ssm_mav_picbyte/static/pic/'+dataInt.data[i].
//oImg.src=src='/Login_ssm_mav_picbyte/user/toLookImage?id='+pic[i].photoId;
oImg.src=src='/Login_ssm_mav_picbyte/showPicture/tofindPic?id='+pic[i].
//oImg.src='http://localhost:9988/pic/'+pic[i].photoN
oBox.appendChild(oImg);
waterfall('main','pin');
function waterfall(parent,pin){
var oParent=document.getElementById(parent);//父级对象
var aPin=getClassObj(oParent,pin);//获取存储pin的数组的pin
var iPinW=aPin[0].offsetW//一个块框pin的宽
var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin的个数[窗口的宽度除以一个块框的宽度]
oParent.style.cssText='width:'+iPinW*num+'margin:0';//设置父级居中样式:定宽+自动水平外边距
var pinHArr=[];//用于存储没列中的所有块框相加的高度
for(var i=0;i&aPin.i++){
var pinH=aPin[i].offsetH
if(i&num){
pinHArr[i]=pinH;//第一行中的num个块框pin先添加进数组pinHrr
var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值
var minHIndex=getminHIndex(pinHArr,minH);//获取高度最小的pin的index
aPin[i].style.position='absolute';//设置绝对偏移
aPin[i].style.top=minH+'px';
aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
pinHArr[minHIndex]+=aPin[i].offsetH//更新添加了快框后的列高
//获取高度最小的pin 的index
function getminHIndex(arr,minH){
for(var i in arr){
if(arr[i]==minH){
/*通过父级和子元素的class名称获取该同类子元素的数组*/
function getClassObj(parent,className){
var obj=parent.getElementsByTagName('*');//获取父类元素的所有子元素
var pinS=[];//创建一个数组，用于收集子元素
for(var i=0;i&obj.i++){//遍历子元素,判断类别，压入数组
if(obj[i].className==className){
pinS.push(obj[i]);
return pinS;
function checkscrollside(){
var oParent=document.getElementById('main');
var aPin=getClassObj(oParent,'pin');
var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);
//创建【触发添加块框的的函数waterfall()】的高度:最后一个块框的与网页顶部的距离+自身高的一半(未滚到底便开始加载)
//网页中获取滚动条卷去部分的高度
var scrollTop=document.documentElement.scrollTop||document.body.scrollT
var documentH=document.documentElement.clientH//页面高度
return (lastPinH&scrollTop+documentH)?true://到达指定高度后返回true,触发waterfall（）函数
}&/span&到这里我的瀑布墙图片展示基本算是完成了，不知道还有没有更好的处理图片的方法。
以上就介绍了SpringMVC从本地磁盘读取图片显示到JSP页面上，包括了方面的内容，希望对Javascript教程有兴趣的朋友有所帮助。
本文网址链接：/article/detail_110922.html
电脑/手机小常识：设置预读以提高速度Windows XP使用预读设置这一新技术，以提高系统速度。如果你的电脑配置不错，拥有PIII 800, 512M内存以上，你可以进行以下修改：单击“开始/运行”，输入“regedit”，打开注册表，找到[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Memory Management\PrefetchParameters\EnablePrefetcher]，设置数值0，1，2，3（0-Disable,1-预读应用程序,2-启动预读,3-前两者皆预读），推荐使用“3”，这样可以减少启动时间。
上一篇： 下一篇：2982人阅读
Java的解疑（18）
public String getImgFromByte() {
//业务逻辑取得图片的byte[] 数据
& & & & & & & & .......
InputStream buffin = new ByteArrayInputStream(/*byte[]数据*/);
String str= picUrl.getImageType(); &&
& & & & & & & &String imgtype[] = str.split(&/&); &
img = ImageIO.read(buffin);
// 禁止图像缓存。
this.getResponse().setHeader(&Pragma&, &no-cache&);
this.getResponse().setHeader(&Cache-Control&, &no-cache&);
this.getResponse().setDateHeader(&Expires&, 0);
this.getResponse().setContentType(picUrl.getImageType());
// 将图像输出到Servlet输出流中。
ServletOutputS
sos = this.getResponse().getOutputStream();
ImageIO.write(img, imgtype[1], sos);
sos.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
&img src=&getUserIcon!getImgFromByte.action&/&&/span&
struts.xml只需配置acton跳转即可
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：419722次
积分：3547
积分：3547
排名：第5094名
原创：68篇
转载：33篇
评论：65条
(1)(1)(1)(2)(13)(1)(2)(2)(2)(1)(4)(10)(2)(1)(1)(1)(16)(5)(8)(28)