जेएसएफ

Question

में थंबनेल (बाइट []) बनाएं और दिखाएं मैं सर्वर पर छवि अपलोड कर रहा हूं और जब छवि अपलोड की जाती है तो मुझे अपलोड की गई छवि का अंगूठा दिखाना चाहिए। थंबनेल हार्ड डिस्क पर सहेजा नहीं गया है मैं इनपुटस्ट्रीम और आउटपुटस्ट्रीम का उपयोग करता हूं। अपलोड के लिए मैं ustig tomahawk हूँ।

मेरी index.jsp:

<h:form id="uploadForm" enctype="multipart/form-data"> 
    <t:inputFileUpload id="fileupload" 
    accept="image/*" 
    storage="file" 
    value="#{fileUpload.uploadedFile}" 
    styleClass="fileUploadInput" 
    required="true" 
    validator="epacient.FileUploadValidator" 
    requiredMessage="Obvezna izbira datoteke." 
    /> 
    <br /> 
    <h:message for="fileupload" infoStyle="color: green;" 
    errorStyle="color: red;" /> 
    <br /> 
    <h:commandButton value="Upload" id="fileUploadButton" 
    action="#{fileUpload.upload}" /> 
    <h:message for="uploadForm" style="color: red;" /> 
    <h:graphicImage value="#{fileUpload.thumb}" 
    rendered="#{fileUpload.uploaded}" /> 

</h:form> 

fileUpload.upload कॉल समारोह String preview()

private String thumb ; 
public String preview() throws IOException{ 
    HttpServletResponse response = (HttpServletResponse)FacesContext 
    .getCurrentInstance().getExternalContext().getResponse(); 
    try { 
    FacesContext context = FacesContext.getCurrentInstance(); 
    Map requestMap = context.getExternalContext().getApplicationMap(); 
    byte[] bytes = (byte[])(requestMap.get("fileupload_bytes")); 
    // returns byte[] 
    byte[] testByte = createThumbnail(bytes, 200); 
    // here thumbnail is created 
    } catch (Exception ex) { 
    ex.printStackTrace(); 
    } 
} 

createThumbnail:

public static byte[] createThumbnail(byte[] orig, int maxDim) { 
    try { 
    ImageIcon imageIcon = new ImageIcon(orig); 
    Image inImage = imageIcon.getImage(); 
    double scale = (double) maxDim/(double) inImage.getWidth(null); 

    int scaledW = (int) (scale * inImage.getWidth(null)); 
    int scaledH = (int) (scale * inImage.getHeight(null)); 

    BufferedImage outImage = new BufferedImage(scaledW, scaledH, BufferedImage.TYPE_INT_RGB); 
    AffineTransform tx = new AffineTransform(); 

    if (scale < 1.0d) { 
     tx.scale(scale, scale); 
    } 

    Graphics2D g2d = outImage.createGraphics(); 
    g2d.drawImage(inImage, tx, null); 
    g2d.dispose(); 

    ByteArrayOutputStream baos = new ByteArrayOutputStream(); 
    ImageIO.write(outImage, "JPG", baos); 
    byte[] bytesOut = baos.toByteArray(); 

    return bytesOut; 
    } catch (IOException e) { 
    System.out.println("Erro: " + e.getMessage()); 
    e.printStackTrace(); 
    } 
    return null; 
} 

अब मैं अपने थंबनेल है, लेकिन यह किसी भी byte[] कर सकते में है शरीर मुझे बताएं कि मेरे अंगूठे कोके साथ कैसे दिखाना है 10 टैग? या किसी अन्य तरीके से।

धन्यवाद!

Answer 1

छवियों को अलग अनुरोध के रूप में गिना जाता है। आप प्रक्रिया एचटीएमएल प्रतिक्रिया (जेएसएफ का) और एक अनुरोध/प्रतिक्रिया चक्र में छवि दोनों नहीं कर सकते हैं। आपको किसी डेटास्टोर में कहीं भी छवि/अंगूठे को स्टोर करने की आवश्यकता है जो अनुरोध से अधिक समय तक रहता है, उदा। सर्वर की स्थानीय डिस्क फ़ाइल सिस्टम (अस्थायी फ़ोल्डर? वेबकंटेंट फ़ोल्डर?), या डेटाबेस (temp तालिका?), या सत्र में।

सबसे पहले, की जगह

<h:graphicImage value="#{fileUpload.thumb}" ... 

<h:graphicImage value="thumbs/#{fileUpload.thumbId}" ... 

द्वारा

यह रूप में

<img src="thumbs/123" ... 

( src अर्थात् एक मान्य URL पर ले जाना चाहिए) उत्पन्न हो ताकि

फिर, एक HttpServlet जो /thumbs/* के url-pattern पर मैप किया गया है बना सकते हैं और मोटे तौर पर पसंद doGet() लागू इस प्रकार है:

Long thumbId = Long.valueOf(request.getPathInfo().substring(1)); // 123 
byte[] thumb = getItFromDiskOrDatabaseOrSessionByThumbId(thumbId); 
String filename = getOriginalFilenameOfUploadedImageOrInventOne(); 

response.setContentType(getServletContext().getMimeType(filename)); 
response.setContentLength(thumb.length); 
response.setHeader("Content-Disposition", "inline; filename=\"" + filename + "\""); 

BufferedInputStream input = null; 
BufferedOutputStream output = null; 

try { 
    input = new BufferedInputStream(new ByteArrayInputStream(thumb)); 
    output = new BufferedOutputStream(response.getOutputStream()); 
    byte[] buffer = new byte[8192]; 
    int length; 
    while ((length = input.read(buffer)) > 0) { 
     output.write(buffer, 0, length); 
    } 
} finally { 
    if (output != null) try { output.close(); } catch (IOException logOrIgnore) {} 
    if (input != null) try { input.close(); } catch (IOException logOrIgnore) {} 
} 

यह है कि। this article में अधिक सर्वलेट संकेत मिल सकते हैं।

Answer 2

graphicImage टैग HTML प्रतिक्रिया में img टैग उत्पन्न करता है। इसलिए आपको valuegraphicImage टैग की विशेषता में एक छवि का यूआरएल प्रदान करने की आवश्यकता है, जो img टैग की src विशेषता के अनुरूप होगा।

आप या तो:

• एक रास्ता HTTP के माध्यम से सुलभ प्रपत्र के बाहर है कि में filesystem पर थंबनेल लिखें। इसके बाद आप में सीधे value विशेषता में छवि का संदर्भ दे सकते हैं, उदा। /myapp/thumbnail/12345।
• servlet लिखें जो अनुरोध करते समय छवि परोसता है। सर्वलेट या तो स्मृति (HttpSession), फाइल सिस्टम, या डेटाबेस से छवि को पढ़ सकता है, या इसे हर बार उत्पन्न कर सकता है। इस मामले में आपको सर्वलेट को पैरामीटर पास करना होगा, उदा। /myapp/thumbnail.do?filename=12345

संक्षेप में, आप अपने byte[] थंबनेल कहीं (सत्र, फाइल सिस्टम, डेटाबेस) स्टोर करने के लिए की आवश्यकता होगी, नियमित रूप से संसाधन के रूप में सेवा करने के लिए, या तो सीधे या एक सर्वलेट के माध्यम से सक्षम होने के लिए।

Answer 3

रिचफेस ने आपके लिए यह सारण किया है। <a4j:mediaOutput> देखें - आप केवल byte[] को घटक द्वारा प्रदान किए गए OutputStream पर लिखें।

Answer 4

धन्यवाद ewernli। मैंने आपके निर्माण थंबनेल उपयोग विधि का पुन: उपयोग किया है। मैंने इस छोटे संवर्द्धन को जोड़ा ताकि मूल छवि वापस लौटा दी जाए यदि इसकी चौड़ाई निर्धारित अधिकतमडिम चौड़ाई से कम है। मैंने ऐसा इसलिए किया क्योंकि मैं ऐसी परिस्थिति में भाग गया जहां विधि ने एक छवि वापस कर दी जो मूल से बड़ा था, काले पिक्सल के साथ गद्देदार था।

 ImageIcon imageIcon = new ImageIcon(orig); 
     Image inImage = imageIcon.getImage(); 

     int origWidth = inImage.getWidth(null); 
     if(origWidth < maxDim) { 
      return orig; 
     } 

     ...