将字节数组显示为图像； base64 数据 URI 在 IE 中不能超过 32KB答案

【问题标题】：Displaying byte array as image; base64 data URI doesn't work above 32KB in IE将字节数组显示为图像； base64 数据 URI 在 IE 中不能超过 32KB
【发布时间】：2015-04-02 12:39:45
【问题描述】：

我的 bean 中有一个 byte[] 的图像。用户可以使用<h:inputFile/> 上传图片。用户点击上传后，图像应立即显示在页面中（不应保存在数据库/文件夹中）。我尝试使用 Base64 转换，但在 IE 中它只显示 32KB 大小的图像。下面是我的 xhtml 代码。
<h:form id="signatureform" enctype="multipart/form-data"> <h:inputFile id="inputFile" label="file1" value="#{bean.part}"/> <h:commandButton id="upButton" type="submit" action="#{bean.uploadSignature}" value="Upload" styleClass="commandButton"> </h:commandButton> </h:form>
<h:graphicImage url="data:image/jpg;base64,#{bean.encodedImage}" width="275px" height="75px"></h:graphicImage>
我的 Java 代码是

private String encodedImage ;
private Part part;
//getters and setters 
public String uploadSignature() throws IOException {

    InputStream inputStream = null;
    try {
        inputStream = part.getInputStream();
        encodedImage = new String(Base64.encode(IOUtils.toByteArray(inputStream)));
    } catch (Exception e) {

    } finally {
        if (inputStream != null) {
            inputStream.close();
        }
    }
    return SUCCESS;
}

我试过<a4j:mediaOutput/> 但没有帮助。请帮我解决它。

【问题讨论】：

您为什么不将它保存在某个地方？当然这就是他们上传它的目的。
是的，正确。在点击 Save 时还有另一个 Save 按钮，它将被保存到 DB。保存工作正常，唯一的问题是显示。
所以立即将它保存到数据库中，但是带有一个标志来表示它是未确认的——或者将它保存在不同的表中，也许。除此之外，这意味着当用户确实单击保存时，您已经获得了数据...并且这意味着您可以简单地显示它。
但问题是如果用户关闭浏览器图像将被保存在不应该保存的数据库中。除了图像之外，我们还有许多用户将输入数据并保存的字段。如果不想保存数据，那么我们需要丢弃所有内容。
当然，因此您可以有效地进行垃圾收集 - 在用户首次上传图像时保留时间戳，然后在一小时或类似的时间后将其清除。在他们首次上传数据时保留数据将使您的生活整体很多更简单。

标签： image jsf-2 richfaces

【解决方案1】：

最后我能够在 IE 中显示我的图像。我的要求是以 275px *75px 显示图像。为此，我用 Java 调整了图像的大小并显示在网页中。当我调整图像大小并转换为 Base64 字符串时，它变得小于 32kb。我尝试使用 12MB 图像，效果很好:)。下面是我的代码。

        BufferedImage imBuff = ImageIO.read(inputStream);
        BufferedImage resizedImg = resize(imBuff, 275, 75);
        ByteArrayOutputStream os = new ByteArrayOutputStream();
        ImageIO.write(resizedImg, "jpg", os);
        encodedImage = new String(Base64.encode(os.toByteArray()));

private  BufferedImage resize(BufferedImage image, int newWidth, int newHeight) {
        int currentWidth = image.getWidth();
        int currentHeight = image.getHeight();
        BufferedImage newImage = new BufferedImage(newWidth, newHeight, image.getType());
        Graphics2D graphics2d = newImage.createGraphics();
        graphics2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
                RenderingHints.VALUE_INTERPOLATION_BILINEAR);
        graphics2d.drawImage(image, 0, 0, newWidth, newHeight, 0, 0,
                currentWidth, currentHeight, null);
        graphics2d.dispose();
        return newImage;
    }

希望这将有助于其他试图在网页中以小尺寸显示大图像的人。

【讨论】：

所以我有一个问题，您是否尝试从 Chrome 上传，然后保存并从 IE 加载？因为在我的情况下，我可以从 Chrome 上传并从 IE 加载，但不能从 IE 上传
@Shen 我想我试着从 IE 上传它并在 IE 中显示它。我在那个项目上工作了 2 年多。你有什么错误吗？如果没有错误，请尝试使用小尺寸图片（小于 32 KB）。