Nodejs階段:どのように画像をdatauriに変えてホームページに埋め込みますか?
2852 ワード
問題:画像をdatauriに変換する
今日、QQグループで友達に質問がありました.「nodejsは画像を読み取り、base 64に変えて、どう読みますか?」
いい問題です.そしてよく使う機能です.簡単なデモが早く実現しました.ここでメモします.
構想を実現する
構想はとても直観的です.1、写真のバイナリデータを読み取ります.2、base 64文字列になります.3、datauriになります.
base 64の紹介については、阮一峰先生の文章が参考になります.datauriのフォーマットは以下の通りです.
data:[][;base 64]
具体的には、png画像については、大体次のようになります.その中の「xxx」は前のbase 64文字列です.次に、私達はnodejsの中でどうやって実現するかを見ます.
data:image/png;base 64,xxx
具体的に実現する
まず、ローカルピクチャのバイナリデータを読みだします.
demo住所はここをクリックしてください.
関連リンク
Base 64ノート:http://www.ruanyifeng.com/blog/2008/06/base64.html Data URIs:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
今日、QQグループで友達に質問がありました.「nodejsは画像を読み取り、base 64に変えて、どう読みますか?」
いい問題です.そしてよく使う機能です.簡単なデモが早く実現しました.ここでメモします.
構想を実現する
構想はとても直観的です.1、写真のバイナリデータを読み取ります.2、base 64文字列になります.3、datauriになります.
base 64の紹介については、阮一峰先生の文章が参考になります.datauriのフォーマットは以下の通りです.
data:[][;base 64]
具体的には、png画像については、大体次のようになります.その中の「xxx」は前のbase 64文字列です.次に、私達はnodejsの中でどうやって実現するかを見ます.
data:image/png;base 64,xxx
具体的に実現する
まず、ローカルピクチャのバイナリデータを読みだします.
var fs = require('fs');
var filepath = './1.png';
var bData = fs.readFileSync(filepath);
その後、バイナリデータをbase 64符号化された文字列に変換する.var base64Str = bData.toString('base64');
最後に、datauriのフォーマットに変換します.var datauri = 'data:image/png;base64,' + base64Str;
完全な例コードは以下の通りです.コードが非常に少ないです.var fs = require('fs');
var filepath = './1.png';
var bData = fs.readFileSync(filepath);
var base64Str = bData.toString('base64');
var datauri = 'data:image/png;base64,' + base64Str;
console.log(datauri);
github demoアドレスdemo住所はここをクリックしてください.
git clone https://github.com/chyingp/nodejs-learning-guide.git
cd nodejs-learning-guide/examples/2016.11.15-base64-datauri
node server.js
ブラウザでアクセスします.http://127.0.0.1:3000を選択すると、効果が見られます.関連リンク
Base 64ノート:http://www.ruanyifeng.com/blog/2008/06/base64.html Data URIs:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs