Converti il ​​byte [] nella stringa Base64 per l'URI dei dati

Question

So che probabilmente è stato chiesto 10000 volte, tuttavia, non riesco a trovare una risposta diretta alla domanda.

Ho un LOB memorizzato nel mio db che rappresenta un'immagine; Sto ottenendo quell'immagine dal DB e mi piacerebbe mostrarlo su una pagina web tramite il tag HTML IMG. Questa non è la mia soluzione preferita, ma è un'implementazione stop-gap finché non trovo una soluzione migliore.

Sto cercando di convertire il byte [] per Base64 utilizzando l'Apache Commons Codec nel seguente modo:

String base64String = Base64.encodeBase64String({my byte[]}); 

Poi, sto cercando di mostrare la mia immagine sulla mia pagina come questa:

<img src="data:image/jpg;base64,{base64String from above}"/> 

Sta visualizzando l'impostazione predefinita del browser "Non riesco a trovare questa immagine", immagine.

Qualcuno ha qualche idea?

Grazie.

Answer 1

ho usato questo e ha funzionato bene (in contrasto con la risposta accettata, che utilizza un formato non raccomandato per questo scenario):

StringBuilder sb = new StringBuilder(); 
sb.append("data:image/png;base64,"); 
sb.append(StringUtils.newStringUtf8(Base64.encodeBase64(imageByteArray, false))); 
contourChart = sb.toString(); 

Answer 2

Secondo la documentazione ufficiale Base64.encodeBase64URLSafeString(byte[] binaryData) dovrebbe essere quello che stai cercando.

Anche il tipo mime per JPG è image/jpeg.

Answer 3

Questa è la sintassi corretta. Potrebbe essere che il tuo browser non supporti lo schema URI di dati. Vedere Which browsers support data URIs and since which version?

Inoltre, il tipo MIME JPEG è image/jpeg.

Answer 4

Si consiglia inoltre di considerare lo streaming delle immagini sul browser anziché codificarle sulla pagina stessa.

Ecco un esempio di streaming di un'immagine contenuta in un file fuori al browser tramite una servlet, che potrebbe essere facilmente adottato per lo streaming dei contenuti del vostro BLOB, piuttosto che un file:

public void doGet(HttpServletRequest req, HttpServletResponse resp) 
    throws ServletException, IOException 
    { 
    ServletOutputStream sos = resp.getOutputStream(); 
    try { 
     final String someImageName = req.getParameter(someKey); 

     // encode the image path and write the resulting path to the response 
     File imgFile = new File(someImageName); 

     writeResponse(resp, sos, imgFile); 
    } 
    catch (URISyntaxException e) { 
     throw new ServletException(e); 
    } 
    finally { 
     sos.close(); 
    } 
    } 

    private void writeResponse(HttpServletResponse resp, OutputStream out, File file) 
    throws URISyntaxException, FileNotFoundException, IOException 
    { 
    // Get the MIME type of the file 
    String mimeType = getServletContext().getMimeType(file.getAbsolutePath()); 
    if (mimeType == null) { 
     log.warn("Could not get MIME type of file: " + file.getAbsolutePath()); 
     resp.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR); 
     return; 
    } 

    resp.setContentType(mimeType); 
    resp.setContentLength((int)file.length()); 

    writeToFile(out, file); 
    } 

    private void writeToFile(OutputStream out, File file) 
    throws FileNotFoundException, IOException 
    { 
    final int BUF_SIZE = 8192; 

    // write the contents of the file to the output stream 
    FileInputStream in = new FileInputStream(file); 
    try { 
     byte[] buf = new byte[BUF_SIZE]; 
     for (int count = 0; (count = in.read(buf)) >= 0;) { 
     out.write(buf, 0, count); 
     } 
    } 
    finally { 
     in.close(); 
    } 
    } 

Answer 5

Se non si desidera eseguire lo streaming da un servlet, quindi salvare il file in una directory nel webroot e quindi creare il src che punta a tale posizione. In questo modo il server web fa il lavoro di servire il file. Se ti senti particolarmente intelligente, puoi verificare la presenza di un file esistente mediante timestamp/inode/crc32 e scriverlo solo se è stato modificato nel DB che può darti un incremento delle prestazioni. Questo metodo di file supporta inoltre automaticamente le intestazioni ETag e if-modified-since in modo che il browser possa memorizzare correttamente il file nella cache.