JSのFileReaderAPIで読み込んだ画像バイナリを、JavaのImageIOで読み込みたい
JavaScriptのFileReaderで読み込んだ画像データを、サーバーサイドで加工のためBufferedImageに変換したいのですが、うまく変換できません。
画像はWorkerを使った非同期ロードで取得し、
Ajaxでサーバーサイドに送信しています。
worker.js
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);
PostController.java
@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);
}
ちなみに、引数であるbase64文字列を、base64デコードしようとすると、下記のようなエラーが発生します。
java.lang.IllegalArgumentException: Illegal base64 character 3a
また、base64エンコードされたデータをブラウザで確認した際は、選択した画像が正常に表示されます。