Wicket create images from file system

Question

I am making a project in which user when click on a product a modal window open with the product name. I also want to include the product image on my modal window inside a panel. Images are stored on my server in a directory.

I am referring to this link

My panel html code look like this http://wicketinaction.com/2011/07/wicket-1-5-mounting-resources/

ItemOrderPanel.html

        <div>
            <li><a wicket:id="link"></a></li>
        </div>

ItemOrderPanel.java

    final ResourceReference imageResourceReference = new ImageResourceReference();
    String imageName = itm.getProductImage();
    final PageParameters parameters = new PageParameters();
    parameters.set("name", imageName);
    CharSequence urlForImage = getRequestCycle().urlFor(imageResourceReference,parameters);
    ExternalLink link = new ExternalLink("link", urlForImage.toString());
    link.setBody(Model.of(imageName));
    add(link);

In WicketApplication.java

mountResource("/orderPage/{name}",new ImageResourceReference());

I have doubt about this line in WicketApplication.java.

I have created resource file like this

ImageResourceReference.java

public class ImageResourceReference extends ResourceReference{

public ImageResourceReference(){
    super(ImageResourceReference.class,"imagesDemo");
}

@Override
public IResource getResource() {
    return new ImageResource();
}

private static class ImageResource extends DynamicImageResource{

    private static final long serialVersionUID = 1L;

    @Override
    protected byte[] getImageData(Attributes attributes) {
        PageParameters parameters = attributes.getParameters();
        StringValue name = parameters.get("name");

                    byte[] imageBytes = null;
        if(name.isEmpty() == false)
            imageBytes = getImageAsBytes(name.toString());

        return imageBytes;
    }

    private byte[] getImageAsBytes(String label){
        BufferedImage image = new BufferedImage(800, 600, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = (Graphics2D) image.getGraphics();
        g.setColor(Color.BLACK);
        g.setBackground(Color.WHITE);
        g.clearRect(0, 0, image.getWidth(), image.getHeight());
        //g.setFont(new Font("SansSerif", Font.PLAIN, 48));
        g.drawString(label, 50, 50);
        g.dispose();

        Iterator<ImageWriter> writers = ImageIO.getImageWritersByFormatName("jpeg");
        ImageWriter writer = writers.next();
        if (writer == null) {
            throw new RuntimeException("JPG not supported?!");
        }

        final ByteArrayOutputStream out = new ByteArrayOutputStream();

        byte[] imageBytes = null;
        try {

            ImageOutputStream imageOut = ImageIO.createImageOutputStream(out);
            writer.setOutput(imageOut);
            writer.write(image);
            imageOut.close();
            imageBytes = out.toByteArray();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return imageBytes;


    }

    @Override
    public boolean equals(Object that){
        return that instanceof ImageResource;
    }

}

}

But when i debug the code I found out that control is not coming to internal ImageResource class which is returning bytes.

I want to display the image picture on my panel. And the link that is showing on my panel is the link what i stored in my database which is of the local system.

Any help and advice appreciated! Thanks in advance.

Answer 1

Finally i settled on this code in ItemOrderPanel.java

add(new NonCachingImage("img", new AbstractReadOnlyModel<DynamicImageResource>(){
          @Override public DynamicImageResource getObject() {
            DynamicImageResource dir = new DynamicImageResource() {
              @Override protected byte[] getImageData(Attributes attributes) {
                  StringValue name = parameters.get("name");
                  byte[] imageBytes = null;
                    if(name.isEmpty() == false)
                        imageBytes = getImageAsBytes(name.toString());

                    return imageBytes;
              }
            };
            dir.setFormat("image/png");
            return dir;
          }
        }));

private byte[] getImageAsBytes(String label){
    byte[] imageBytes = null;
    try {
            ByteArrayOutputStream outStream = new ByteArrayOutputStream();
            InputStream inStream  = new FileInputStream(new File(label));
            copy(inStream, outStream);
            inStream.close();
            outStream.close();
            return outStream.toByteArray();

        } catch (IOException e) {
            e.printStackTrace();
          } 
     return imageBytes;


}

private void copy(InputStream source, OutputStream destination)
        throws IOException
    {

        // Transfer bytes from source to destination
            byte[] buf = new byte[1024];
            int len;
            while ((len = source.read(buf)) > 0) {
                destination.write(buf, 0, len);
            }
            source.close();
            destination.close();

    }

Answer 2

使用DynamicImageResource并获取以字节为单位的图像。

Answer 3

I think the problem is that you create two different instances of ImageResourceReference (and I think this is a problem in the original article as well). So I would do the following in your ItemOrderPanel.java:

WebApplication.get().
        getResourceReferenceRegistry().
        getResourceReference(
            ImageResourceReference.class,
            "imagesDemo",
            null,
            null,
            null,
            true,
            false)

Also make sure that you didn't map any other resources or pages with an URL which is very general, like "/" which could have higher priority than "orderPage". According to the Wiki page below:

Mappers with bigger IRequestMapper.getCompatibilityScore(Request) are asked first.

Look at this page for the details: How request mapping works in Wicket

It should work fine then! ;)

Answer 4

https://cwiki.apache.org/WICKET/uploaddownload.html

you can find some information here.