無法顯示圖像，因為它在jsp中包含錯誤

Question

我正在嘗試保存並顯示mongodb數據庫中的圖像。 我將其保存在以base-64 String格式的數據庫中。 例如，這是這些圖像之一：

"data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAYABgAAD/7gAOQWRvYmUAZAAAAAAB/+EN/kV4aWYAAE1NACoAAAAIAAgBMgACAAAAFAAAAG4BOwACAAAACwAAAIJHRgADAAAAAQAFAABHSQADA......

這是findImage服務，它將圖像的字符串格式更改為字節數組：

 public byte[] findImage(String id)
    {
        String str = chRepository.findImage(id);
        byte[] b = str.getBytes();
        return b;
    }

這是控制器類中的findImage：

   @GetMapping("/findImage/{id}")
    public byte[] findImage(@PathVariable String id) throws IOException
    {
        byte[] bb = IOUtils.toByteArray(new ByteArrayInputStream(chService.findImage(id)));
        return bb;
    }

我創建一個URL以在腳本文件中顯示圖像：

<script>
        function makeURL(val, row) {

            if (val){
                return '<a target="_blank" href=  "'  +window.location.href+  'ch/findImage/' + val + '">image</a>';
            }
        }
    </script>

但是當調用這樣的URL時：

http://localhost:8080/ch/findImage/5

它給出了錯誤：由於包含錯誤，無法顯示圖像。

注意：我猜服務findImage函數存在問題，它會將base-64 String更改為byte []數組，但是我不知道如何將其更改為正確的格式。

Answer 1

您只在字符串上調用getBytes() ，但是有兩點需要注意。

1. 該字符串具有用於在HTML頁面內插入圖像數據的特殊語法。 第一部分包含MIME類型和;base64指示逗號后的下一部分是Base64編碼的。

2. getBytes()為您提供字符串的字節表示形式。 這不是您想要的。 因為Base64是一種特殊的編碼，所以您必須對其進行特殊處理。 您可以為此使用標准類java.util.Base64 。

例：

/**
 * Decodes the Base64 part to bytes.
 * 
 * @param img An inline data encoded in Base64 like <code>"data:image/jpeg;base64,/9j/4AAQSkZJRg..."</code>.
 * 
 * @return Decoded data part
 */
public static byte[] parseImageString(String img) {
  // Avoid a NPE
  if(img == null) {
    return null;
  }

  // Use only the part after the comma
  final int pos = img.indexOf(',');
  if(pos >= 0) {
    final String base64Part = img.substring(pos + 1);
    final Base64.Decoder base64Decoder = Base64.getDecoder();
    return base64Decoder.decode(base64Part);
  } else {
    return null;
  }
}

Answer 2

嘗試在控制器中使用它們：

public void findImage(@PathVariable String id,
                      HttpServletResponse response) throws IOException
{
    BufferedImage myIMG = ImageIO.read(<inputStreamHere>)
    //you'll have to create inputstream for ur image
    ServletOutputStream out = response.getOutputStream();
    response.setContentType("image/jpeg");
    ImageIO.write(bufferedImage, "jpeg", out);
    out.close();
}

或者您可以這樣做：

@GetMapping("/findImage/{id}")
public byte[] findImage(@PathVariable String id,
                           HttpServletResponse response) throws IOException
{
    ServletOutputStream out = response.getOutputStream();   
    ByteArrayOutputStream os = new ByteArrayOutputStream();
   try {
        byte[] b;
        ImageIO.write(<bufferedImageHere>, "png", Base64.getEncoder().wrap(os));
        StringBuilder sb = new StringBuilder();
        sb.append("data:image/png;base64,").append(os);
        b = String.valueOf(sb).getBytes();
        out.write(b);
    } catch (IOException ioe) {
        throw new Exception(ioe);
    }
}