spring mvc display base64 as image

Question

私はCKEditorWYSWIGをマイ・テキスト・エディターとして使用しています。それは<img src="data:image/png;base64,iVBORw0KGgoAAAANsd..." />としてポストに送信されると、ユーザーのエディタに画像を貼り付ける

私は、このbase64文字列を取得するデータベースに保存し、この画像が表示されます/image/{id}のようなエンドポイントを作成したいと思います

のでポストに私はいないだろうイメージ全体に base64文字列を入れる必要がありますが、上記のようなURLだけです。

は、これは私が救う方法ですbase64byte[]として：編集者が任意の画像が含まれている場合

checkAndSavePhotos

@RequestMapping(value = {"/main/createpost"}, method = RequestMethod.POST) 
    public String postPost(Model model, Principal principal,@RequestParam(name="editor-content") String postPayload) throws IOException { 


     postPayload = checkAndSavePhotos(postPayload); 
     model.addAttribute("editor",postPayload); 
     return "createpost"; 
    } 

をチェックしているので、それをデータベースに格納する場合：

private String checkAndSavePhotos(String postPayload) throws IOException { 
     int i =1; 
     Pattern pattern = Pattern.compile(".*<img src=\".*;base64,(.*?)\".*/>"); 

     Matcher matcher = pattern.matcher(postPayload); 
     while (matcher.find()) { 
      PostPhoto postPhoto = new PostPhoto(); 
      byte[] bytes = Base64.getDecoder().decode(matcher.group(i).getBytes()); 
      MultipartFile mf =null; 
      try { 
       BufferedImage originalImage = ImageIO.read(new ByteArrayInputStream(bytes)); 
       ByteArrayOutputStream baos = new ByteArrayOutputStream(); 
       ImageIO.write(originalImage, "png", baos); 
       baos.flush(); 
       mf = new MockMultipartFile("test", baos.toByteArray()); 
      } catch (IOException e) { 
       // TODO Auto-generated catch block 
       e.printStackTrace(); 
      } 
      postPhoto.setContent(mf.getBytes()); 
      postPhoto = postPhotoService.save(postPhoto); 
     } 

     return null; 
    } 

私はそれこれを作りました私の他の形式では<input type='file' />を使用していたのでFileBucketを表示すると、画像を表示するにはfileBucket.getFile().getBytes();を表示するのに十分でした。私はMultipartFileをbyte[]から作成しようとしていて、同じようにしました。私は、データベースで探していたときにcontent列がどのように見える今

@RequestMapping(value = "/main/postphoto/{imageId}") 
    @ResponseBody 
    public byte[] getImage(@PathVariable Long imageId) throws IOException { 
     PostPhoto image = postPhotoService.findById(imageId); 

     return image.getContent(); 
    } 

：：誰も私を与えることができます \x89504e470d0a1a0a0000000d49484452000000280000002808060000008cfeb86d0000033f4944415478daed9(...)

ながら、ファイル \377\330\377\341\000\030Exif\000\000II*\000\010\000\000\000\000\000\000\000\000\000\000\000\377\354\000\021Ducky\000\001\000\004\000\000\000A\000\000\377\341\003ohttp://ns.adobe.com/xap/1.0/\000<?xpacket begin="\357\273\277" id="W5M0MpCehiHzreSzNTczkc9d"?> (...)

filebucketから

私のエンドポイントは、画像を表示しますどのように動作させるためのヒント？

Answer 1

それは愚かな間違いだったようです。

私のデータベースの列はtextのタイプでしたので、私はbyte[]をテキストとして保存していましたので、ファイルがブラウザによって正しくデコードされていないことは間違いありません。

データベース列タイプをbyteaに変更すると問題が解決しました。