21287


JavaScriptのFileReaderで読み込んだ画像データを、サーバーサイドで加工のためBufferedImageに変換したいのですが、うまく変換できません。

画像はWorkerを使った非同期ロードで取得し、  
Ajaxでサーバーサイドに送信しています。

worker.js

[code]

    self.addEventListener('message', function(e) {
        var reader = new FileReaderSync();
    
        var file_data = reader.readAsDataURL(e.data.file);
        request({
                     url: "/post",
                     data: {
                               file : file_data
                           },
                     success: function() {
                         alert("success");
                     }
               });
    }, false);
    
[/code]

PostController.java

[code]

    @RequestMapping(value="/post", method=RequestMethod.POST)
    public String post(@RequestParam("file") String fileUri) {
        // 引数は "data:image/jpeg;base64,略//2Q==" という形式
        InputStream byteStream = new ByteArrayInputStream(
                                          fileUri.getBytes("UTF-8")
                                     );
        // read結果はnull;
        BufferedImage bufferedImage = ImageIO.read(byteStream);
    }
    
[/code]

ちなみに、引数であるbase64文字列を、base64デコードしようとすると、下記のようなエラーが発生します。

[code]

    java.lang.IllegalArgumentException: Illegal base64 character 3a
    
[/code]

また、base64エンコードされたデータをブラウザで確認した際は、選択した画像が正常に表示されます。


CC BY-SA 3.0
2016-01-24T20:02:41.187
21271
2016-01-25T07:54:23.097
2016-01-25T00:51:13.483
5778
8396
question
jquery ajax spring java8 base64
JSのFileReaderAPIで読み込んだ画像バイナリを、JavaのImageIOで読み込みたい


Base64デコードするときはヘッダー部を除去しなければならないことを忘れていました。

[code]

     @RequestMapping(value="/post", method=RequestMethod.POST)
     public String post(@RequestParam("file") String fileUri) {
        // 引数は "data:image/jpeg;base64,略//2Q==" という形式
        InputStream byteStream = new ByteArrayInputStream(
                                      Base64.getDecoder().decode(
                                           fileUri.replaceAll("^[^,]+,", "")
                                      );
                                 );
        // read結果はnull;
        BufferedImage bufferedImage = ImageIO.read(byteStream);
    }
    
[/code]

とすることで解決しました。


CC BY-SA 3.0
2016-01-25T07:54:23.097
21287
2016-01-25T07:54:23.097
8396
21271
answer