2014-10-16 11 views
10

का उपयोग कर mysql डेटाबेस से छवि को कैसे प्रदर्शित करें I आइटम वर्ग आइटम (itemId, itemName, itemPrice, itemContent, itemImage) के लिए वसंत एमवीसी का उपयोग करके mysql डेटाबेस में BLOB प्रकार छवि संग्रहीत कर रहा हूं .मैं डेटाबेस में सफलतापूर्वक छवि संग्रहीत करता हूं लेकिन जब मैं मैं इसे अपने जेएसपी में प्रदर्शित करने की कोशिश कर रहा हूं। यह कुछ बाइनरी दिखा रहा है जैसे [बी @ 7 एफबी 0 सी 025।वसंत एमवीसी

कैसे मैं jsp में उचित छवि प्रदर्शित कर सकते (छवि mysql डेटाबेस तालिका में संग्रहीत किया जाता है)

मेरे मॉडल वर्ग:

@Entity 
@Table(name="item") 
public class Item { 

@Id 
@Column(name="ItemId") 
@GeneratedValue 
private Integer itemId; 

@Column(name="ItemName") 
private String itemName; 

@Column(name="ItemContent") 
private String itemContent; 
/* 
@Column(name="ItemImage") 
private ByteArray ItemImage; 
*/ 
@Column(name="ItemPrice") 
private int itemPrice; 

@Column(name="ItemImage") 
private byte[] itemImage; 

"addItem.jsp" आइटम जोड़ने के लिए में छवि के साथ जिम्मेदार बताते हैं डेटाबेस।

<form:form modelAttribute="itemAttribute" enctype="multipart/form-data" method="POST" action="${Url}"> 
<table> 

    <tr> 
     <td><form:label path="itemId"></form:label></td> 
     <td><form:input path="itemId" type="hidden"/></td> 
    </tr> 

    <tr> 
     <td><form:label path="itemName">ItemName:</form:label></td> 
     <td><form:input path="itemName"/></td> 
    </tr> 
    <tr> 
     <td><form:label path="itemPrice">ItemPrice:</form:label></td> 
     <td><form:input path="itemPrice"/></td> 
    </tr> 
    <tr> 
     <td><form:label path="itemContent">ItemContent:</form:label> 
     <td><form:input path="itemContent"/> 
    </tr> 
    <tr> 
     <form:label for="itemImage" path="itemImage">itemImage:</form:label> 
     <form:input path="itemImage" type="file" /> 
    </tr> 
</table> 

<input type="submit" value="Save" /> 
</form:form> 

जेएसपी पृष्ठ छवि के साथ आइटम विशेषताओं को प्रदर्शित करने के लिए। CategoryID:

<tr> 
     <td><form:label path="categoryName">CategoryName:</form:label></td> 
     <td><form:input path="categoryName"/></td> 
    </tr> 
</table> 
<input type="submit" value="Save" /> 

<table width: 100%; text-align:center"> 
<tr> 
    <th>ItemId</th> 
    <th>ItemName</th> 
    <th>ItemPrice</th> 
    <th>ItemFeatures</th> 
    <th>Edit</th> 
    <th>Delete</th> 
    <th>ItemImage</th> 
</tr> 
<tbody> 


    <c:forEach items="${categoryAttribute.item}" var="item"> 
    <tr> 
      <c:url var="editCUrl" value="/item/edit?bid=${categoryAttribute.categoryId}&cid=${item.itemId}" /> 
      <c:url var="deleteCUrl" value="/item/delete?id=${item.itemId}" /> 
      <td><c:out value="${item.itemId}" /></td> 
      <td><c:out value="${item.itemName}"/></td> 
      <td><c:out value="${item.itemPrice}"/></td> 
      <td><c:out value="${item.itemContent}"/></td> 
      <td><a href="${editCUrl}">EditItem</a></td> 
      <td><a href="${deleteCUrl}">DeleteItem</a></td> 
      <td><c:out value="${item.itemImage}"/></td> 
    </tr> 
    </c:forEach> 

कैसे मैं ठीक से छवि है जो database.I में संग्रहित है प्रदर्शित कर सकते हैं मैं गलत यह इस jsp में छवि ईक प्रदर्शित करके कर रहा हूँ अनुमान कहते हैं। लेकिन मैं यहां जेएसपी में छवि कैसे प्रदर्शित कर सकता हूं।

+0

में custome टैग फ़ाइल शामिल हैं। लेकिन जेएसपी में छवि को सही तरीके से प्रदर्शित करने के लिए मुझे क्या करना चाहिए। – bablu

उत्तर

19

मैं अंततः अपने जेएसपी पर छवि प्रदर्शित करने में सक्षम हूं। मैंने क्या किया।

मैंने अलग से इस तरह एक नियंत्रक बनाया।

@Controller 
@RequestMapping("/myImage") 
public class ImageController { 

@Resource(name="categoryService") 
private CategoryService categoryService; 

@Resource(name="itemService") 
private ItemService itemService; 

@RequestMapping(value = "/imageDisplay", method = RequestMethod.GET) 
    public void showImage(@RequestParam("id") Integer itemId, HttpServletResponse response,HttpServletRequest request) 
      throws ServletException, IOException{ 


    Item item = itemService.get(itemId);   
    response.setContentType("image/jpeg, image/jpg, image/png, image/gif"); 
    response.getOutputStream().write(item.getItemImage()); 


    response.getOutputStream().close(); 

और jsp में मैं इस

<img src="/Project1/myImage/imageDisplay?id=${item.itemId}"/> 

किया और छवि सफलतापूर्वक प्रदर्शित किया गया था।

+0

अच्छे उत्तर के लिए धन्यवाद, मैं वसंत एमवीसी के लिए नया हूं और नया नियंत्रक बनाये बिना इस विधि का उपयोग करने का एक तरीका है? अग्रिम धन्यवाद। –

4

मैंने अपने नियंत्रक में कोड नीचे लिखा और यह मेरे लिए ठीक काम कर रहा है।

मेरे प्रोजेक्ट में उपयोगकर्ता में प्रोफ़ाइल ऑब्जेक्ट है जिसमें फोटो @LOB है। अपने गुणों के अनुसार इस कोड को संशोधित करें।

byte[] encodeBase64 = Base64.encode(user.getProfile().getPhoto()); 
    String base64Encoded = new String(encodeBase64, "UTF-8"); 
    mav.addObject("userImage", base64Encoded); 
jsp फ़ाइल में

मैं कोड

<img src="data:image/jpeg;base64,${userImage}" /> 

लिखा यह आप आम-कोडेक जार आवश्यकता होती है।

भी आप छवि दिखाने के लिए कस्टम टैग का उपयोग कर सकते हैं।

0

डेटाबेस से जेएसपी में छवि प्रदर्शित करने के लिए आप एक और चीज कर सकते हैं। मान लीजिए कि आपको jsp में सभी उपयोगकर्ता की छवियां प्रदर्शित करने की आवश्यकता है। इसके लिए आप अपना खुद का custome jstl टैग बना सकते हैं जिसमें बाइट छवि को base64 छवि में परिवर्तित करने के लिए कोड शामिल है।

यहाँ अपने प्रोजेक्ट में

छवि

package com.spring.tags; 

import java.io.IOException; 
import java.io.UnsupportedEncodingException; 
import java.text.SimpleDateFormat; 
import java.util.Date; 

import javax.servlet.jsp.JspException; 
import javax.servlet.jsp.JspWriter; 
import javax.servlet.jsp.tagext.SimpleTagSupport; 
import javax.servlet.jsp.tagext.TagSupport; 

import org.apache.commons.codec.base64.Base64; 

public class UserImage extends SimpleTagSupport { 

    private byte[] usrImage; 

    public void setUsrImage(byte[] usrImage) { 
     this.usrImage = usrImage; 
    } 

@Override 
    public void doTag() throws JspException, IOException { 
     System.out.println("tag lib"); 
     try { 
      JspWriter out = getJspContext().getOut(); 
      if (usrImage != null && usrImage.length > 0) { 
       byte[] encodeBase64 = Base64.encode(usrImage); 
       String base64Encoded = new String(encodeBase64, "UTF-8"); 
       out.print("data:image/jpeg;base64,"+base64Encoded); 

      } 
     } catch (Exception e) { 
      throw new JspException("Error: " + e.getMessage());  } 
    } 
} 

WebContent में टीएलडी फ़ाइल बनाने

यानी user.getProfile()। GetPhoto()

प्रोफ़ाइल कक्षा में है।मैंने अपने टैगलिब फ़ोल्डर में फ़ाइल बनाई है

<?xml version="1.0" encoding="UTF-8"?> 
<taglib version="2.0" xmlns="http://java.sun.com/xml/ns/j2ee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee web-jsptaglibrary_2_0.xsd"> 
    <tlib-version>1.0</tlib-version> 
    <short-name>ui</short-name> 
    <uri>/taglib/userimage</uri> 
    <tag> 
     <name>image</name> 
     <tag-class>com.spring.tags.UserImage</tag-class> 
     <body-content>empty</body-content> 
     <info>This Tag Displayes current user profile image</info> 
     <attribute> 
      <name>usrImage</name> 
      <required>true</required> 
      <description>Provide a display format</description> 
      <rtexprvalue>true</rtexprvalue> 
     </attribute> 
    </tag> 
</taglib> 

अब आप छवि प्रदर्शित करने के लिए जेएसपी में कोड लिख सकते हैं।

<img src="<ui:image usrImage='${user.profile.photo}' /> 

हर बार नियंत्रक में छवि परिवर्तित करने की कोई जरूरत सिर्फ jsp करने के लिए बाइट छवि गुजरती हैं और हमारे custome टैग बाइट छवि बदलने और दृश्य पेज में यह Dispay होगा।

नोट: छवि प्रदर्शित करने: <= "$ {item.itemImage}"/बाहर मूल्य ग> मैं उपयोग कर रहा हूँ jsp फ़ाइल

<%@ taglib uri="/taglib/userimage.tld" prefix="ui"%> 
संबंधित मुद्दे