为什么我的base64图片里面有它?

时间:2015-12-15 16:33:32

标签: java html jsp bufferedimage

我尝试使用以下代码在jsp上展示多个图片:

ByteArrayOutputStream baos = new ByteArrayOutputStream();
                        ImageIO.write(bi, "jpg", baos);
                        baos.flush();
                        byte[] imageInByteArray = baos.toByteArray();
                        baos.close();
                        String b64 = javax.xml.bind.DatatypeConverter.printBase64Binary(imageInByteArray);
                        out.println("<td><img src=\"data:image/jpg;base64, " + b64 + "\" "
                                + "class=\"img-responsive\" "
                                + "width=\"304\" height=\"236\"/></td>");

但是在浏览器中我收到一条错误消息:

  

获取数据:image / jpg; base64,   / 9J / 4AAQSkZJRgABAgAAAQABAAD / 2wBDAAgGBgcGBQgHBwcJCQgK ... FMAooooAWkoooAa3SozRRTASgUUUALRRRQAUUUUCH9qZRRQAlFFFABRRRQAUUUUAFFFFAH / 9K =   净:: ERR_INVALID_URL

然后我使用Google开发者工具查看了错误,发现了这个: enter image description here

那个Doctype标签好像在我的base64字符串里面...... 我试图删除该标记,连同换行符,图像确实显示出来。但有时,当我更改图像时,Doctype标记似乎位于页面的另一部分,如下所示:

enter image description here

我正在使用Netbeans 8.0和Apache tomcat 8.0

有人可以帮我解决这个问题吗?

编辑:

这是一个自定义页面,用于创建基于元素(insMap变量)自动生成表单的动态表单。我的代码有点混乱,因为我还在测试页面......但是,有些建议会很好。

我的完整代码:

<%-- 
    Document   : CallFOrm
    Created on : Dec 1, 2015, 12:39:03 AM
    Author     : Darkside
--%>

<%@page import="javax.imageio.ImageIO"%>
<%@page import="java.io.ByteArrayOutputStream"%>
<%@page import="SimpleKubraLib.Misc.ImageOperation"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@page import="Connection.Connection"%>
<%@page import="SimpleKubraLib.Conn.DML.MySQL.DataRetrieve"%>
<%@page import="java.util.List"%>
<%@page import="java.util.LinkedHashMap"%>
<%@page import="java.util.Map"%>

<%!
    private List<Object[]> getDataRef(java.sql.Connection conn, String colRefs[]) {
        String sql = " select " + colRefs[0] + ", " + colRefs[1] + " "
                + " from " + SimpleKubraLib.Misc.StringOperation.getSchemaTableName(colRefs[0]) + " ";
        return new DataRetrieve().getData(conn, sql, 2);
    }
%>
<h1 class="text-center"><%= request.getAttribute("PageTitle")%></h1>
<div style="display:none" id="FormAlertHeader" class="alert alert-danger text-center">
    Mohon periksa input anda!
</div>
<form method="post" action="../Form/FormHandle" class="form-horizontal" role="form"
      enctype="multipart/form-data">
    <%
        Object mode = request.getParameter("FormMode");
        if (mode == null) {
            mode = "insert";
        }

        mode = SimpleKubraLib.Misc.StringOperation.replaceWord(mode.toString(), "_");

        Map<String, Object[]> insMap = (LinkedHashMap<String, Object[]>) request.getAttribute("insMap");
        Object labClassSize = request.getAttribute("LabelClassSize");
        if (labClassSize == null) {
            labClassSize = "col-xs-2";
        }
        Object inpClassSize = request.getAttribute("InputClassSize");
        if (inpClassSize == null) {
            inpClassSize = "col-xs-2";
        }

        String labClassSizeOffset = labClassSize.toString();
        labClassSizeOffset = labClassSizeOffset.substring(0, labClassSizeOffset.indexOf("-", 4) + 1)
                + "offset" + labClassSizeOffset.substring(labClassSizeOffset.lastIndexOf("-"), labClassSizeOffset.length());

        for (Map.Entry ent : insMap.entrySet()) {
            String key = ent.getKey().toString();
            Object[] vals = (Object[]) ent.getValue();

            Object realVal = (vals[1] != null ? vals[1] : (vals[8] == null ? null
                    : (SimpleKubraLib.Misc.StringOperation.getDeffVal(vals[8].toString()))));
            String tipe = vals[2].toString().toString();
            if (tipe.equals("select")) {
                if (vals[5] != null) {
                    tipe = "mul";
                } else if (vals[3] != null) {
                    tipe = "enum";
                }
            } else if (tipe.equals("file")) {
                if (vals[7] != null && vals[7].toString().equals("image")) {
                    tipe = vals[7].toString();
                }
            } else if (tipe.equals("number")) {
                if (vals[3] != null) {
                    tipe = vals[3].toString();
                }
            }
            boolean en = vals[9] == null ? true : Boolean.parseBoolean(vals[9].toString());
//            (vals[4] != null && vals[4].toString().equals("pri") ? false : ))
//            out.println(vals[4] + "<br>" + vals[8] + "<br>" + mode + "<br>");
            en = ((vals[4] != null && vals[4].toString().equals("pri")
                    && vals[8] != null && !vals[8].toString().equals("")
                    && mode.toString().equals("Insert"))
                    || (vals[4] != null && vals[4].toString().equals("pri")
                    && mode.toString().equals("Update"))
                    ? false : en);

//            <div class="form-group has-error has-feedback">
//  <label class="control-label" for="inputError2">Input with error</label>
//  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
//  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
//  <span id="inputError2Status" class="sr-only">(error)</span>
//</div>
            // maxlength="10"
            if (vals[2].toString().equals("text")) {
                out.println(""
                        + "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
                        + "class=\"form-group\">"
                        + " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
                        + " <div class=\"" + inpClassSize + "\">"
                        + "     <input class=\"form-control\" id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
                        + "     name=\"" + key + (Character.toString((char) 28)) + tipe
                        + (Character.toString((char) 28)) + vals[4] + "\""
                        + "     type=\"" + tipe + "\" value=\"" + (realVal == null ? "" : realVal) + "\" "
                        + "     " + (en ? "" : "disabled") + " "
                        + "     " + (vals[6] == null ? "" : "maxlength=\"" + ((int) vals[6]) + "\"") + ">"
                        //                        + "     <span  class=\"help-block\">Please correct the error</span>"
                        + "     <span style=\"display:none\" "
                        + "     id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
                        + "     class=\"glyphicon glyphicon-remove form-control-feedback\" "
                        + "     aria-hidden=\"true\"></span>"
                        + " </div>"
                        + "</div>");
            } else if (vals[2].toString().equals("date")) {
                out.println(""
                        + "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
                        + "class=\"form-group\">"
                        + " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
                        + " <div class=\"" + inpClassSize + "\">"
                        + "     <input class=\"form-control\" id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
                        + "     name=\"" + key + (Character.toString((char) 28)) + tipe
                        + (Character.toString((char) 28)) + vals[4] + "\""
                        + "     type=\"" + tipe + "\" value=\"" + (realVal == null ? "" : realVal) + "\" "
                        + "     " + (en ? "" : "disabled") + ">"
                        + "     <span style=\"display:none\" "
                        + "     id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
                        + "     class=\"glyphicon glyphicon-remove form-control-feedback\" "
                        + "     aria-hidden=\"true\"></span>"
                        + " </div>"
                        + "</div>");
            } else if (vals[2].toString().equals("textarea")) {
                out.println("<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
                        + "class=\"form-group\">"
                        + " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
                        + " <div class=\"" + inpClassSize + "\">"
                        + "     <textarea class=\"form-control\" "
                        + "     id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
                        + "     name=\"" + key + (Character.toString((char) 28)) + tipe
                        + (Character.toString((char) 28)) + vals[4] + "\""
                        + "     " + (en ? "" : "disabled") + " rows=\"3\">" + (realVal == null ? "" : realVal) + "</textarea>"
                        + "     <span style=\"display:none\" "
                        + "     id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
                        + "     class=\"glyphicon glyphicon-remove form-control-feedback\" "
                        + "     aria-hidden=\"true\"></span>"
                        + " </div>"
                        + "</div>");
            } else if (vals[2].toString().equals("file")) {
                if (vals[7].toString().equals("image")) {
                    if (realVal != null) {
                        BufferedImage bi = ImageOperation.convertToBi(realVal);
                        if (bi != null) {
                            ByteArrayOutputStream baos = new ByteArrayOutputStream();
                            ImageIO.write(bi, "jpg", baos);
                            baos.flush();
                            byte[] imageInByteArray = baos.toByteArray();
                            baos.close();
                            String b64 = javax.xml.bind.DatatypeConverter.printBase64Binary(imageInByteArray);
                            out.println("<td><img src=\"data:image/jpg;base64, " + b64 + "\" "
                                    + "class=\"img-responsive\" "
                                    + "width=\"304\" height=\"236\"/></td>");
                        }
                    }

                    out.println(""
                            + "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
                            + "class=\"form-group\">"
                            + " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
                            + " <div class=\"" + inpClassSize + "\">"
                            + "     <div class=\"fileinput fileinput-new\" data-provides=\"fileinput\">"
                            + "         <div class=\"fileinput-preview thumbnail\" data-trigger=\"fileinput\" "
                            + "         style=\"width: 200px; height: 150px;\">"
                            + "         </div>"
                            + "         <div>"
                            + "             <span class=\"btn btn-default btn-file\">"
                            + "                 <span class=\"fileinput-new\">Select image</span>"
                            + "                 <span class=\"fileinput-exists\">Change</span>"
                            + "                 <input type=\"file\""
                            + "                 id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
                            + "                 name=\"" + key + (Character.toString((char) 28)) + tipe
                            + (Character.toString((char) 28)) + vals[4] + "\" >"
                            + "                 <input type=\"hidden\""
                            + "                 id=\"" + key + (Character.toString((char) 28)) + tipe + "b64\" "
                            + "                 name=\"" + key + (Character.toString((char) 28)) + tipe + "b64"
                            + (Character.toString((char) 28)) + vals[4] + "\" "
                            + "                 value=\"" + (realVal == null ? "" : realVal) + "\">"
                            + "             </span>"
                            + "             <a href=\"#\" class=\"btn btn-default fileinput-exists\" "
                            + "             id=\"" + key + (Character.toString((char) 28)) + tipe + "href\" "
                            + "             data-dismiss=\"fileinput\">Remove</a>"
                            + "     <span style=\"display:none\" "
                            + "     id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
                            + "     class=\"glyphicon glyphicon-remove form-control-feedback\" "
                            + "     aria-hidden=\"true\"></span>"
                            + "         </div>"
                            + "     </div>"
                            + " </div>"
                            + "</div>"
                    );
                } else {
                    out.println(""
                            + "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
                            + "class=\"form-group\">"
                            + " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
                            + " <div class=\"" + inpClassSize + "\">"
                            + "     <input class=\"form-control\" "
                            + "     id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
                            + "     name=\"" + key + (Character.toString((char) 28)) + tipe
                            + (Character.toString((char) 28)) + vals[4] + "\" "
                            + "     type=\"" + tipe + "\" value=\"" + (realVal == null ? "" : realVal) + "\" "
                            + "     " + (en ? "" : "disabled") + ">"
                            + "     <span style=\"display:none\" "
                            + "     id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
                            + "     class=\"glyphicon glyphicon-remove form-control-feedback\" "
                            + "     aria-hidden=\"true\"></span>"
                            + " </div>"
                            + "</div>");
                }
            } else if (vals[2].toString().equals("datetime-local")) {
                out.println(""
                        + "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
                        + "class=\"form-group\">"
                        + " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
                        + " <div class=\"" + inpClassSize + "\">"
                        + "     <input class=\"form-control\" id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
                        + "     name=\"" + key + (Character.toString((char) 28)) + tipe
                        + (Character.toString((char) 28)) + vals[4] + "\" "
                        + "     type=\"" + tipe + "\" "
                        + "     value=\"" + (realVal == null ? "" : realVal.toString().replace(" ", "T")) + "\" "
                        + "     " + (en ? "" : "disabled") + ">"
                        + "     <span style=\"display:none\" "
                        + "     id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
                        + "     class=\"glyphicon glyphicon-remove form-control-feedback\" "
                        + "     aria-hidden=\"true\"></span>"
                        + " </div>"
                        + "</div>");
            } else if (vals[2].toString().equals("select")) {
                out.println(""
                        + "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
                        + "class=\"form-group\">"
                        + " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
                        + " <div class=\"" + inpClassSize + "\">"
                        + "     <select class=\"form-control\" id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
                        + "     name=\"" + key + (Character.toString((char) 28)) + tipe
                        + (Character.toString((char) 28)) + vals[4] + "\" "
                        + "     " + (en ? "" : "disabled") + ">");
                out.println("<option value=\"\">- Select -</option>");
                if (vals[5] != null) {
                    request.getRequestDispatcher("../Main/SetConn.jsp").include(request, response);
                    Connection conn = (Connection) request.getAttribute("SQLConnection");

                    if (conn != null) {
                        String colRefs[] = vals[5].toString().split(Character.toString((char) 28));
                        List<Object[]> dataRef = this.getDataRef(conn.getMySQLConn(), colRefs);
                        Object v = realVal == null ? "" : realVal;
                        for (Object[] data : dataRef) {
                            out.println("<option value=\"" + data[0] + "\" " + (v.equals(data[0]) ? "selected" : "") + ">"
                                    + "" + data[1] + "</option>");
                        }

                        if (conn.getMySQLConn() != null) {
                            conn.getMySQLConn().close();
                        }
                    }
                } else if (vals[3] != null) {
                    String valsEnum[] = vals[3].toString().split(Character.toString((char) 28));
                    Object val = realVal == null ? "" : realVal;
                    for (String v : valsEnum) {
                        out.println("<option value=\"" + v + "\" " + (val.equals(v) ? "selected" : "") + ">"
                                + "" + v + "</option>");
                    }
                }
                out.println("     </select>"
                        + "     <span style=\"display:none\" "
                        + "     id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
                        + "     class=\"glyphicon glyphicon-remove form-control-feedback\" "
                        + "     aria-hidden=\"true\"></span>"
                        + " </div>"
                        + "</div>");
            } else if (vals[2].toString().equals("number")) {
                double step = vals[3].toString().equals("int") ? 1 : vals[3].toString().equals("double") ? 0.01 : 1;
                out.println(""
                        + "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
                        + "class=\"form-group\">"
                        + " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
                        + " <div class=\"" + inpClassSize + "\">"
                        + "    <input class=\"form-control\" id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
                        + "     name=\"" + key + (Character.toString((char) 28)) + tipe
                        + (Character.toString((char) 28)) + vals[4] + "\" "
                        + "     type=\"" + vals[2] + "\" value=\"" + (realVal == null ? "" : realVal) + "\" "
                        + "     " + (en ? "" : "disabled") + " step=\"" + step + "\">"
                        + "     <span style=\"display:none\" "
                        + "     id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
                        + "     class=\"glyphicon glyphicon-remove form-control-feedback\" "
                        + "     aria-hidden=\"tru\"></span>"
                        + " </div>"
                        + "</div>");
            }
        }
    %>
    <div class="form-group">
        <div class="<%= labClassSizeOffset%> <%= inpClassSize%>">
            <button type="button" class="btn btn-primary btn-md" onclick="cekInput()">
                <span class="glyphicon glyphicon-floppy-disk"></span> <%= mode%>
            </button>
            <button type="button" class="btn btn-warning btn-md" onclick="cleanField()">
                <span class="glyphicon glyphicon-erase"></span> Bersihkan
            </button>
            <button id="SubmitFormHandle" type="submit" class="btn btn-warning btn-md" style="display: none;">
                <span class="glyphicon glyphicon-erase"></span> Submit
            </button>
        </div>
    </div>
    <input type="hidden" name="MainTab" value="<%= request.getAttribute("MainTab")%>">
    <input type="hidden" name="FormMode" value="<%= request.getAttribute("FormMode")%>">
    <input type="hidden" name="Master" value="<%= request.getAttribute("Master")%>">
    <%
        String id = (String) request.getParameter("id");
        if (id != null) {
    %>
    <input type="hidden" name="ID" value="<%= request.getParameter("id")%>">
    <%
        }
    %>
</form>

1 个答案:

答案 0 :(得分:0)

javax.xml.bind.DatatypeConverter是生成二进制数据的base64表示的一个奇怪选择。请展示您的更多JSP - 您的 doctype 可能会在其他地方生成。

尝试Commons-Codec Base64实施:

console.log(form, form.fieldName.$touched)