如何将图像从 Applet 传递到 JSF 支持 bean [英] How to pass image from Applet to JSF backing bean

问题描述

我正在使用一个 Web 应用程序，其中有一个 Java Applet 可以将图像从 wacom 设备捕获到 RenderedImage 对象中.小程序本身嵌入到 JSF 2.0 页面中.

I am working with a web application in which there is a Java Applet that captures an image from a wacom device into a RenderedImage object. The applet itself is embedded into a JSF 2.0 page.

我需要将创建的 RenderedImage 从 Applet 传递到 JSF 支持 bean，以便它成为 User 对象的一部分.我的支持 bean 是视图范围的.

I need to pass the created RenderedImage from Applet to a JSF backing bean so that it would be a part of a User object. My backing bean is view scoped.

我真的很迷茫.我一直在寻找一个关于如何实现这一目标的好例子.我应该使用 JSObject，还是应该将图像发送到 servlet?

I'm really lost with this. I've been searching for a good example on how this goal can be achieved. Should I use JSObject, or should I send an image to a servlet?

你能提供一些关于如何解决这个问题的建议吗?

Can you offer some advice on how to solve this problem?

推荐答案

你的问题可以分为以下几个子步骤:

You problem can be divided into the following sub-steps:

1. 从保存数据的 BufferedImage 创建一个字节数组；
2. 正确编码数据，使其在作为字符串发送到服务器时不会被损坏/修改，例如使用 Apache Commons Base64 编解码器;
3. 通过 Applet-to-JavaScript 通信将数据保存为隐藏表单字段；
4. 向服务器发送POST请求，例如触发的onclick;
5. 以标准 JSF 方式将编码字符串写入 java bean 属性；
6. 对字符串进行解码，得到表示图像的字节数组；
7. 从字节数组重新创建图像并将其注入您的视图作用域 bean.

1. Create a byte array from your BufferedImage that is holding its data;
2. Encode the data properly so that it won't be damaged/modified while it is being sent to the server as a string, for example by using Apache Commons Base64 codec;
3. Save the data as a hidden form field via Applet-to-JavaScript communication;
4. Send POST request to the server by, for example, triggering <h:commandButton>'s onclick;
5. Write encoded string to a java bean property in a standard JSF way;
6. Decode the string to get the byte array representing the image;
7. Recreate the image from the byte array and inject it in your view scoped bean.

也就是说，让我们继续实施该议程.

That said, let's move on to implementing that agenda.

在您的小程序中，您将有一个方法来完成点 (1) - (4).获取图像后，以通常的方式调用它:

In your applet you'll have a method that will do points (1) - (4). Call it in a usual way, after you obtain the image:

Java Applet 方法:

Java Applet method:

public void processImage() throws IOException, JSException {
    BufferedImage image = createBufferedImage();//the way you get the image
    /* point 1 */
    ByteArrayOutputStream bs = new ByteArrayOutputStream();
    ImageIO.write(image, "png", bs);
    bs.flush();
    byte[] imageByteArray = bs.toByteArray();
    bs.close();
    /* point 1 */
    String imageAsString = Base64.encodeBase64String(imageByteArray);//point 2
    /* points 3-4 */
    JSObject window = JSObject.getWindow(this);
    window.call("writeImageValue", new Object[] {imageAsString});
    /* points 3-4 */
}

JSF 页面(表单和 JavaScript):

JSF page (form and JavaScript):

<script>
    function writeImageValue(imageValue) {
        document.getElementById('image').value = imageValue;//point 3
        document.getElementById('image-form:submit').click();//point 4
    }
</script>
<h:form id="image-form">
    <input type="hidden" id="image" name="image" />
    <h:commandButton id="submit" action="#{imageSubmitBean.submitImage}" style="display:none" />
</h:form>

JSF 托管 bean:

JSF managed bean:

@ManagedBean
@RequestScoped
public class ImageSubmitBean {

    @ManagedProperty("#{param.image}")//point 5
    private String imageAsString;//getter+setter
    @ManagedProperty("#{userBean}")//your view scoped bean
    private UserBean userBean;//getter+setter

    public String submitImage() throws IOException {
        byte[] imageByteArray = Base64.decodeBase64(imageAsString);//point 6
        /* point 7 */
        InputStream is = new ByteArrayInputStream(imageByteArray);
        BufferedImage image = ImageIO.read(is);
        is.close();
        userBean.setUserImage(image);//update your view scoped bean
        /* point 7 */
        return null;
    }

}

这篇关于如何将图像从 Applet 传递到 JSF 支持 bean的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！