【JavaScript】base64文字列を画像にデコードしたい

Question

前提・実現したいこと

サーバ側の処理にてbase64文字列を画像にデコードしたいと考えています。
最終的にデコードした画像データをDB側に保存する処理をしていく予定です。

別のデコードの方法・npmの処理の仕方などが間違っていればご教示頂けますと、助かります。
よろしくお願いいたします。

該当のソースコード

　const base64 = require('url-safe-base64')
　let data = "data:image/jpeg;base64,/***"

  // デコードデータの取り出し
　const predata = data.split(',')
　const img = base64.decode(predata[1]) 

試したこと

該当ソースコードのimgをDBに保存しましたが、DB側で確認すると画像データが表示できない状況でした。保存されたデータサイズも本来の画像データサイズよりも大きくなっており、表示できないことからデコードがうまくいっていないと判断しています。

ほかのnpmなども利用してみましたが、うまくデコードができていないためか、画像データは表示することができませんでした。（atob,base-64など）

補足情報（FW/ツールのバージョンなど）

npm: url-safe-base64: 1.1.1

Comments

[yambejp]

ブラウザ上のbase64データをどうやってサーバーに送るつもりでしょうか？
逆にbase64データならサーバーで変換してDBに登録すればよいのでは？

[shishi01]

ありがとうございます。
axiosを用いて、サーバに対してbase64データを送っています。
サーバ側での登録の処理のため、base64をデコードしたいと考えています。

[AbeTakashi]

なんだか状況がよく把握できないのですが、デコードできないのはエンコードが間違っているからではないでしょうか？　当たり前ですがエンコードとデコードは同じ形式で行わないとなりませんが、url-safe-base64を使ってるからには、エンコード側もこちらを使う必要があるでしょう。ちなみにBase64 URL エンコードと通常のBase64 エンコードは違うので注意が必要です。画像ならURLとして扱わない限りは通常のBase64 エンコードを使うべきかと思います。

参考）
https://qiita.com/kunihiros/items/2722d690b1525813c45e

あと、画像をbase64エンコードすると元のデータサイズよりも大きくなるのが普通です。1.4倍くらいになるはずです。

画像をDBに保存したいのであれば、Base64エンコードを使わずとも保存できると思いますが、Base64エンコードして保存したい目的などを書くとより具体的なアドバイスが届くかもしれません。

[shishi01]

確認ありがとうございます。
エンコードとデコードの認識がちゃんとできていなかったので確認させていただきます。
ほかの処理方法も含めて考えてみます。

Answer 1

let data="data:image/gif;base64,R0lGODdhEAAQAIACAAUFBfr6+iwAAAAAEAAQAAACJoyPqcsIrV6QE1hbscSGzl4dXJiJ1HM66ua1nPclG9ixNgzl+s4XADs=";
const filename="test.gif";
const type=data.match(/image/.+?(?=;)/)[0];
const bin = atob(data.replace(/^.*,/, ''));
const buffer = new Uint8Array(bin.length).map((_,x)=>bin.charCodeAt(x));
const blob = new Blob([buffer.buffer], {type});
const method="post";
const body=new FormData();
body.append("test",blob,filename);
fetch(url,{method,body}).then(res=>res.text()).then(console.log);

Comments

[shishi01]

回答ありがとうございます。参考にさせていただきます。