導入
Base64は、64の印刷可能な文字に基づいたバイナリデータを表す表現方法です。 2は6の電力に64に等しいため、6ビットごとに特定の印刷可能な文字に対応するユニットです。 3バイトには24ビットがあり、4つのベース64ユニットに対応しています。つまり、3バイトを4つの印刷可能な文字で表現する必要があります。電子メールの送信エンコードとして使用できます。 Base64の印刷可能な文字には、AZ、AZ、および数字0-9が含まれるため、合計で62文字があります。他の2つの印刷可能なシンボルは、一般に +および /で異なるシステムで異なります。
変換原理
base64の直接データソースはバイナリシーケンスです。もちろん、写真、テキスト、オーディオ、ビデオをバイナリシーケンスに変換してから、Base64エンコードに変換することもできます。ここで議論しているのは、バイナリをBase64エンコーディングに変換する方法と、写真、テキスト、オーディオ、ビデオをバイナリシーケンスに変換する方法にご期待ください。
変換する前に、インデックステーブルを定義します。これは、変換方法を指定します。
変換するとき、最初にバイナリシーケンスをグループ化し、各6ビットがグループです。ただし、エンコードされたバイトの数が3で割り当てられない場合、最終的には1つまたは2つのバイトがあります。次の方法を使用して処理できます。最初に0バイト値を使用して最後にメイクアップして、3で分割できるようにし、次にbase64エンコードを行うことができます。 1つまたは2つの '='番号をエンコードされたbase64テキストに追加して、入力するバイト数を表します。つまり、最後の6ビットBase64バイトブロックにオクテットが残っている場合、4ビット0値があり、最後に2つの等しい符号が付いています。最後の6ビットベースバイトブロックに2つのオクテットが残っている場合、0値の2ビットがあり、最後に等記号が取り付けられています。次の表を参照してください。
JavaScriptはbase64を実装しています
原則が理解されると、簡単に実装できます。
定義（function（require、exports、module）{var code = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789+/"。 base64 @param {string} * @return {string} */ function bintstring {var result = ""; - テール、var i = 0; i <bitstringtemp1; i += 6）{bitstringtemp1.substr（i、6）、2）コード[Parseint（BitStringTemp2、2）]; base64tobin（string = ""; {tail ++} vitstring.substr（0、bitstring -length * 2）; str.length {var charcode（i）.toString（9 -charcode.length）; BintoStr（bin）{var i = 0; i <bin = 8）{result.fromCharcode（bin.substr（i、8）、2）） exports.decodebase64 = function（str）{return bintostr（base64tobin（str））;画像データのbase64エンコーディング
画像データをbase64に変換するには、最初に画像のバイナリデータを取得する必要があります。画像のバイナリデータは、Canvasインターフェイスを介して取得できます。特定の実装は次のとおりです。
関数getcanvas（w、h）{var c = document.createelement（ 'canvas'）; c.width = w; c.height = h; return c;}関数getPixels（img）{var c = getcanvas（img.width、img.height）; var ctx = c.getContext（ '2d'）; ctx.drawimage（img、0、0）; ctx.getimagedata（0、0、c.width、c.height）を返します;}画像のバイナリデータを取得した後、次のステップはエンコードすることです。写真にはピクセル情報だけでなく、長さと幅の情報も含まれているためです。したがって、ピクセル情報をエンコードしている間、幅と高さの情報も特定の契約に従ってエンコードする必要があります。私はこのようにそれを処理しました：
画像のピクセル数値データをバイナリシーケンスに変換します。幅と高さの情報を文字列$$width,height$$をバイナリシーケンスに変換します。画像のピクセル情報のバイナリシーケンスと、画像の幅と高さのバイナリシーケンスを組み合わせて、Base64をエンコードします
特定の実装は次のとおりです。
関数img2base64（img）{var imgdata = getpixels（img）.data; var imgwidth = getpixels（img）.width; var imgheight = getpixels（img）.height; var bin = ""; for（var i = 0; i <imgdata.length; i ++）{bin+= base.numtostring（imgdata [i]）; } bin = bin + base.stringtobin（ "$$" + imgwidth + "、" + imgheight + "$$"）; base.bintobase64（bin）;}画像Base64データをデコードします
デコードは、エンコードの逆プロセスです。プロセスは大まかです：
画像のbase64情報をデコードして、画像のピクセル情報と幅と高さの情報を含むバイナリシーケンスを取得します。次に、バイナリシーケンスを文字列にデコードして、高さと幅情報を取得します。バイナリシーケンスの高さと幅の情報を削除して、ピクセル情報を取得します。ピクセル情報に基づいてピクセルマトリックスを生成します。ピクセルマトリックス、幅、高さに基づいて画像オブジェクトImagedataを作成します。 Putimagedataを使用して画像を描画します。
特定のコードの実装は次のとおりです。
function paint（imgdata）{var canvas = document.getElementbyId（ "mycanvas"）; var ctx = canvas.getContext（ "2d"）; ctx.fillrect（0、0、imgdata.width、imgdata.height）; ctx.putimagedata（imgdata、0、0）; }関数base642img（data）{var str = base.bintostr（base.base64tobin（data））; var imgwidth = str.match（// $/$（/d+）、（/d+）/$/$$/、 ""）[1]; var imgheight = str.match（// $/$（/d +）、（/d +）/$/$$/、 ""）[2] var imgdata = base.base64tobin（data）.replace（base.stringtobin（ "$$" + imgwidth + "、" + imgheight + "$$"）; var imagedataarray = new uint8clampedarray（imgwidth * imgheight * 4）; for（var i = 0; i <imagedataarray.length; i ++）{imagedataarray [i] = parseint（imgdata.substr（i * 8、8）、2）; } new Imagedata（Imagedataarray、imgwidth、imgheight）を返します。 }