FileReader.readAsText()のサンプルを試して動作させているのですが、PNG画像を選択すると文字化けしてしまいます。
文字化けしないようにするにはどうしたら良いでしょうか?
やりたいことは、PNG画像のデータを以下のようなバイナリ形式で受け取り、これをそのままデータベースに保存したいです。データはサーバ側でPythonを動作させているのでそちらで受け取りたいです。
b'\x89PNG\r\n\x1a\n\x00\x00\x00\....
使用するOS MacOS High Sierra
ブラウザはchromeバージョン 88.0.4324.150です。
よろしくお願いします。
<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
input { width: 95% ; font-size: 16px ; }
</style>
</head>
<body>
<input type="file" multiple id="hoge">
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
var resultElement = document.getElementById( "result" ) ;
element.onchange = function () {
var fileReader = new FileReader() ;
fileReader.onload = function () {
console.log( this.result ) ;
resultElement.appendChild( new Text( this.result ) ) ;
}
var file = element.files[0] ;
fileReader.readAsText( file ) ;
// fileReader.readAsBinaryString( file ) ; // 試してみよう!
}
</script>
</body>
</html>
参照
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/FileReader/readAsText/