소개
Base64는 64 개의 인쇄용 문자를 기반으로 이진 데이터를 나타내는 표현 방법입니다. 2는 6의 전력에 64와 같기 때문에 6 비트는 특정 인쇄 가능한 문자에 해당하는 단위입니다. 3 개의 바이트는 4 개의 Base64 단위에 해당하는 24 비트를 가지며, 즉 3 바이트는 4 개의 인쇄용 문자로 표시되어야합니다. 전자 메일의 전송 인코딩으로 사용할 수 있습니다. Base64의 인쇄 가능한 문자에는 문자 AZ, AZ 및 0-9 숫자가 포함되므로 총 62자가 있습니다. 다른 두 인쇄 가능한 기호는 일반적으로 + 및 /에 따라 다릅니다.
전환 원리
Base64의 직접 데이터 소스는 이진 시퀀스입니다. 물론 사진, 텍스트 및 오디오 및 비디오를 이진 시퀀스로 변환 한 다음 Base64 인코딩으로 변환 할 수도 있습니다. 여기서 논의하는 것은 바이너리를 Base64 인코딩으로 변환하는 방법과 사진, 텍스트 및 오디오 및 비디오를 바이너리 시퀀스로 변환하는 방법을 계속 지켜봐 주시기 바랍니다.
변환하기 전에 변환 방법을 지정하는 인덱스 테이블을 정의하십시오.
변환 할 때 먼저 이진 시퀀스를 그룹화하고 각 6 비트는 그룹입니다. 그러나 인코딩 된 바이트의 수를 3으로 나눌 수 없으면 결국 1 또는 2 바이트가 나타납니다. 다음 방법을 사용하여 처리 할 수 있습니다. 먼저 0 바이트 값을 사용하여 끝을 보충하여 3으로 나눌 수있게 한 다음 Base64 인코딩을 사용할 수 있습니다. 인코딩 된 Base64 텍스트에 하나 또는 두 개의 '='숫자를 추가하여 채울 바이트 수를 나타냅니다. 즉, 마지막 6 비트 Base64 바이트 블록에 남은 옥트가있을 때 0 값의 4 비트가 있고, 2 개의 동일한 부호가 끝에 부착됩니다. 마지막 6 비트베이스 바이트 블록에 2 개의 옥트가 남아있는 경우 0 값의 2 비트가 있고 끝에 동일한 부호가 부착됩니다. 다음 표를 참조하십시오.
JavaScript는 Base64를 구현합니다
원칙이 이해되면 구현하기 쉽습니다.
define (function (요구, 내보내기, 모듈) {var code = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789+/". split ( ""; // indexor [email protected] * @descround winancer winancer winance winance winance winance auther63. 인코딩 * @param {string} */ function bintobase64 (bitstring) {var tail = "; tail); var = 0; i += 6) {bitstringtemp1.substr (i, 6), 2); 2); 결과는 새로운 배열 ((6- 꼬리) / 2 + 1). for (var i = 0; i <str.length; i ++) {if (str [i]! = "=") {var decode = code.indexof (2); bitstring.length * 2); str.charcodeat (i) (var i = 0; i <bin.length; i += 8) {result += stromcode (bin.substr (i, 8), 2); bintostr (Base64Tobin (str));Base64 이미지 데이터 인코딩
이미지 데이터를 Base64로 변환하려면 먼저 이미지의 이진 데이터를 얻어야합니다. 그림의 이진 데이터는 캔버스 인터페이스를 통해 얻을 수 있습니다. 특정 구현은 다음과 같습니다.
함수 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); return 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 + "$$"); 반환베이스 .Bintobase64 (bin);}이미지 Base64 데이터를 디코딩합니다
디코딩은 인코딩의 역 프로세스입니다. 프로세스는 대략 :
그림의 Base64 정보를 디코딩하여 그림의 픽셀 정보를 포함하는 이진 시퀀스 및 너비 및 높이 정보를 얻습니다. 그런 다음 이진 시퀀스를 문자열로 디코딩하여 높이 및 너비 정보를 얻습니다. 이진 시퀀스에서 높이와 폭 정보를 제거하여 픽셀 정보를 얻습니다. 픽셀 정보를 기반으로 픽셀 행렬을 생성하고; 픽셀 매트릭스, 너비 및 높이를 기반으로 이미지 객체 ImageData를 만듭니다. 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); } 함수 Base642IMG (data) {var str = base.bintostr (base.base64tobin (data)); var imgwidth = str.match (// $/$ (/d+), (/d+)/$/$$/, "") [1]; var imgheight = str.match (// $/$ (/d +), (/d +)/$/$$/, "") var imageataarray = new Uint8clampedArray (imgwidth * imgheight * 4); for (var i = 0; i <imagedataarray.length; i ++) {imageataarray [i] = parseint (imgdata.substr (i * 8, 8), 2); } return new imageData (imageataArray, imgwidth, imgeight); }