流输出图片到JSP页面:Image to Byte Array and Byte Array to Image
2013-10-14 17:49
316 查看
Spring MVC开发中想把后台用Java生成的验证码图片显示在前台JSP页面上的img标签里,直接引用路径的话,JSP显示出第一次生成的验证码后刷新的时候显示的图片并不能被更新,但是数据库和实际文件都已经更新了。试了很多种方法,清除Cookie、删tomcat的cache、关浏览器、在img中的路径之后加随机数,统统不起作用,改文件名太麻烦,搜到的很多方法用的都是JS和Servlet(不在考虑范围内),足足卡了五六个小时,直到最后看到下面这篇文章。
http://mrbool.com/how-to-convert-image-to-byte-array-and-byte-array-to-image-in-java/25136#
The conventional way of including an image on a webpage is to store an image on server or
database and give its path on html webpage so that the image is obtained from that place and then shown on the webpage.
This article will help you to show images on your webpage’s without having those images stored in your server or
database.
This is all possible because image can be converted into sequence of byte array. And the converted byte array can be used to get back the original image.
This byte array converter can be made easily in Java which
we will discuss here. After that we will show how to use that byte array to display image on web page.
First we make a Java program
which is going to input an image and then convert it into byte array and then encode it using Base 64 encoding which is standard.
Listing 1: Java code
to get byte Array
We give a short description of what is happening in the code ,
First we explain the import files.
BufferedImage is used to store the image(in our case icon.png) in a buffer.
This is used to convert the image in byte array
File is used to read a file.
ImageIO is used to write the buffered image into byte output array
Base 64 is used to encode the byte array obtained in Base 64 encoding.
The name of the class is Image2Base64 .We define a main function.
The image to be read is icon.pngFirst we read the image and store it inside a Buffered image variable which is image.
Now we write the buffered image into a ByteArrayOutputStream object with help of ImageIO class so that it can be converted into a byte array
Now we convert it into byte array.
Now we encode this using Base64 encoding
Then we display the byte array for image on screen.Remember the converted byte array strin is a very long string.
You need to copy this output and then use it in the html webpage to include images(I will show that).Make sure you copy it properly because if anything is missed then image will not be displayed or will be distorted and hence will be of no use.
Now we come to HTML part and tell how to show using a byte array.
Listing 2: Web page using byte Array
Here, I have shown the html which will be used.
You can define any title you like. Here I have given it as csanuragjain but you may change that in your webpage so that it may reflect appropriate message to the user.
You just need to copy the output of the java program in the area in Bold. The output would be a very long string like iVBORw0KGgoAAAANSUhEUgAAAEAAAAA………………
Now , you may store that byte array in your database but remember that this is a very long string.If you want to use it later in your webpage like in php or jsp then just connect with mysql and get the byte array value from there and then put the value obtained
in your own html image tag.
We founded the byte array from the above java programs.It does all the work and at last generates an encoded byte array which could be used easily.
You may make a backup of your image so that you always have the byte array to resemble to your favorite images
This is all for this article. Hope you liked it. See you next time with some new exciting article.
http://mrbool.com/how-to-convert-image-to-byte-array-and-byte-array-to-image-in-java/25136#
The conventional way of including an image on a webpage is to store an image on server or
database and give its path on html webpage so that the image is obtained from that place and then shown on the webpage.
This article will help you to show images on your webpage’s without having those images stored in your server or
database.
This is all possible because image can be converted into sequence of byte array. And the converted byte array can be used to get back the original image.
This byte array converter can be made easily in Java which
we will discuss here. After that we will show how to use that byte array to display image on web page.
First we make a Java program
which is going to input an image and then convert it into byte array and then encode it using Base 64 encoding which is standard.
Listing 1: Java code
to get byte Array
import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import java.io.File; import javax.imageio.ImageIO; import com.sun.org.apache.xerces.internal.impl.dv.util.Base64; public class Image2Base64 { public static void main(String args[]) { try{ BufferedImage image = ImageIO.read(new File("icon.png")); ByteArrayOutputStream baos = new ByteArrayOutputStream(); ImageIO.write(image, "png", baos); byte[] res=baos.toByteArray(); String encodedImage = Base64.encode(baos.toByteArray()); System.out.println(“The encoded image byte array is shown below.Please use this in your webpage image tag.\n”+encodedImage); } catch(Exception e) { e.printStackTrace(); System.out.println(“Some problem has occurred. Please try again”); } } }
We give a short description of what is happening in the code ,
First we explain the import files.
BufferedImage is used to store the image(in our case icon.png) in a buffer.
This is used to convert the image in byte array
File is used to read a file.
ImageIO is used to write the buffered image into byte output array
Base 64 is used to encode the byte array obtained in Base 64 encoding.
The name of the class is Image2Base64 .We define a main function.
The image to be read is icon.pngFirst we read the image and store it inside a Buffered image variable which is image.
Now we write the buffered image into a ByteArrayOutputStream object with help of ImageIO class so that it can be converted into a byte array
Now we convert it into byte array.
Now we encode this using Base64 encoding
Then we display the byte array for image on screen.Remember the converted byte array strin is a very long string.
You need to copy this output and then use it in the html webpage to include images(I will show that).Make sure you copy it properly because if anything is missed then image will not be displayed or will be distorted and hence will be of no use.
Now we come to HTML part and tell how to show using a byte array.
Listing 2: Web page using byte Array
<HTML> <HEAD> <TITLE>csanuragjain</TITLE> </HEAD> <BODY> <img src="data:image/png;base64,PASTE THE BYTE ARRAY HERE WHICH IS OBTAINED FROM JAVA PROGRAM" alt="IMG DESC"> </BODY> </HTML>
Here, I have shown the html which will be used.
You can define any title you like. Here I have given it as csanuragjain but you may change that in your webpage so that it may reflect appropriate message to the user.
You just need to copy the output of the java program in the area in Bold. The output would be a very long string like iVBORw0KGgoAAAANSUhEUgAAAEAAAAA………………
Now , you may store that byte array in your database but remember that this is a very long string.If you want to use it later in your webpage like in php or jsp then just connect with mysql and get the byte array value from there and then put the value obtained
in your own html image tag.
Sample Output :
Explaination :
We founded the byte array from the above java programs.It does all the work and at last generates an encoded byte array which could be used easily.
Usage :
You may make a backup of your image so that you always have the byte array to resemble to your favorite imagesThis is all for this article. Hope you liked it. See you next time with some new exciting article.
相关文章推荐
- Java byte[] 转图片 在jsp页面显示
- java byte[] 转图片 在jsp页面显示
- Struts输出流向jsp页面写入图片乱码
- Java 图片流输出ByteArray字符串到前台转图片方法及问题处理
- Convert a string to a byte array and vica-versa in C#
- java 读取数据库图片二进制流并输出到jsp页面
- jsp 页面上图片分行输出小技巧
- servlet和struts2一起使用,实现绝对路径下的图片输出到jsp页面
- Cordova页面加载外网图片失败,Refused to load the image
- bytetobmp and bmptobyte(Image)
- Image To Byte Array Function
- parse and display a BMP image in the Flash Player using the ByteArray class
- jsp 页面上图片分行输出小技巧
- weblogic容器通过JSP页面输出图片出现乱码Tomcat下却正常
- 用Python和OpenCV创建一个图片搜索引擎的完整指南 The complete guide to building an image search engine with Python and
- ImageSource to Byte Array
- Byte Array to NSData——iOS将服务器返回的图片字节数组用UIImageView显示该图像
- Byte Array To Image Function
- Convert URL to image with Python and OpenCV(根据URL下载图片)
- 关于如何实现在整合struts2和hibernate4框架下实现many-to-one级联数据表在JSP页面中的输出