การแนะนำ
Base64 เป็นวิธีการแสดงที่แสดงถึงข้อมูลไบนารีตามอักขระที่พิมพ์ได้ 64 ตัว เนื่องจาก 2 เท่ากับ 64 ถึงกำลัง 6 ทุก ๆ 6 บิตเป็นหน่วยซึ่งสอดคล้องกับอักขระที่พิมพ์ได้บางตัว สามไบต์มี 24 บิตซึ่งสอดคล้องกับ 4 base64 หน่วยนั่นคือ 3 ไบต์ต้องแสดงด้วยอักขระที่พิมพ์ได้ 4 ตัว มันสามารถใช้เป็นการเข้ารหัสการส่งอีเมล อักขระที่พิมพ์ได้ใน Base64 รวมถึงตัวอักษร AZ, AZ และตัวเลข 0-9 ดังนั้นจึงมีทั้งหมด 62 อักขระ อีกสองสัญลักษณ์ที่พิมพ์ได้แตกต่างกันไปในระบบที่แตกต่างกันโดยทั่วไป + และ /
หลักการแปลง
แหล่งข้อมูลโดยตรงของ Base64 เป็นลำดับไบนารี แน่นอนคุณสามารถแปลงรูปภาพข้อความและเสียงและวิดีโอเป็นลำดับไบนารีแล้วแปลงเป็น Base64 การเข้ารหัส สิ่งที่เรากำลังพูดถึงที่นี่คือวิธีการแปลงไบนารีเป็น Base64 การเข้ารหัสและคอยติดตามวิธีการแปลงรูปภาพข้อความและเสียงและวิดีโอเป็นลำดับไบนารี
ก่อนที่จะแปลงให้กำหนดตารางดัชนีซึ่งระบุวิธีการแปลง:
เมื่อแปลงเรากลุ่มลำดับไบนารีเป็นครั้งแรกและแต่ละ 6 บิตเป็นกลุ่ม อย่างไรก็ตามหากจำนวนไบต์ที่เข้ารหัสไม่สามารถหารด้วย 3 แล้วจะมี 1 หรือสองไบต์ในที่สุด คุณสามารถใช้วิธีการต่อไปนี้เพื่อประมวลผล: ก่อนอื่นให้ใช้ค่า 0-byte เพื่อชดเชยในตอนท้ายเพื่อให้สามารถหารได้ 3 แล้วการเข้ารหัส base64 เพิ่มตัวเลขหนึ่งหรือสอง '=' ลงในข้อความ Base64 ที่เข้ารหัสเพื่อแสดงจำนวนไบต์ที่จะกรอก กล่าวคือเมื่อมี octet เหลืออยู่ในบล็อก base 6-bit 64 ไบต์สุดท้ายมีสี่บิตของค่า 0 และสองสัญญาณเท่ากันจะติดอยู่ในตอนท้าย; หากมี Octet สองตัวที่เหลืออยู่ในบล็อกไบต์ฐาน 6 บิตล่าสุดมีสองบิตของค่า 0 และมีการแนบเครื่องหมายเท่ากันในตอนท้าย อ้างถึงตารางต่อไปนี้:
JavaScript ใช้ base64
เมื่อหลักการเข้าใจแล้วมันจะง่ายต่อการใช้งาน
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {var code = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789+/" split (""); Base64 การเข้ารหัส * @param {String} * @return {String} */ function bintobase64 (bitstring) {var result = ""; Bitstring.substr (bitstring.length - หาง, หาง); (หาง) {result += code [parseint (bitstringTemp2, 2)]; Base64tobin (str) {var bitstring = ""; {tail ++;}} return bitstring.substr (0, bitstring.length - tail * 2); str.length; BintOstr (bin) {var result = ""; exports.decodeBase64 = ฟังก์ชั่น (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 = ""; สำหรับ (var i = 0; i <imgdata.length; i ++) {bin+= base.numtoString (imgdata [i]); } bin = bin + base.stringTobin ("$$" + imgwidth + "," + imgheight + "$$"); return base.bintobase64 (bin);}ถอดรหัสข้อมูล Base64 ภาพ
การถอดรหัสเป็นกระบวนการผกผันของการเข้ารหัส กระบวนการประมาณ:
ถอดรหัสข้อมูล BASE64 ของรูปภาพเพื่อให้ได้ลำดับไบนารีที่มีข้อมูลพิกเซลของข้อมูลภาพและความกว้างและความสูง จากนั้นถอดรหัสลำดับไบนารีลงในสตริงเพื่อรับข้อมูลความสูงและความกว้าง ลบข้อมูลความสูงและความกว้างในลำดับไบนารีเพื่อรับข้อมูลพิกเซล สร้างเมทริกซ์พิกเซลตามข้อมูลพิกเซล สร้างวัตถุภาพที่ถ่ายภาพตามเมทริกซ์พิกเซลความกว้างและความสูง ใช้ Putimagedata เพื่อวาดภาพ
การใช้รหัสเฉพาะคือ:
ฟังก์ชั่นสี (imgdata) {var canvas = document.getElementById ("mycanvas"); var ctx = canvas.getContext ("2d"); ctx.fillrect (0, 0, imgdata.width, imgdata.height); ctx.putimagedata (imgdata, 0, 0); } function 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 + "," var imagedataarray = ใหม่ uint8clampedarray (imgwidth * imgheight * 4); สำหรับ (var i = 0; i <imagedataarray.length; i ++) {imagedataarray [i] = parseint (imgdata.substr (i * 8, 8), 2); } ส่งคืน imagedata ใหม่ (imagedataarray, imgwidth, imgheight); -