자바스크립트 base64 잘못된 코드

최근에는 Javascript를 사용하여 Base64로 이미지와 텍스트를 인코딩할 때 많은 웹사이트에서 잘못된 코드 문제가 발생했습니다. 이러한 상황은 일반적으로 인코딩 방법이나 인코딩 프로세스의 오류로 인해 발생합니다. 이러한 문제를 해결하기 위해서는 Javascript의 Base64 인코딩에 대한 깊은 이해와 이를 올바르게 사용하는 방법이 필요합니다.

Base64란 무엇인가요?

Base64는 바이너리 데이터를 ASCII 문자로 인코딩하는 방법입니다. 3개의 8비트 바이트를 4개의 6비트 바이트로 변환하고 지정된 문자 집합의 64자 중 하나를 사용하여 결과를 ASCII 문자열로 채웁니다. 데이터 전송 중에 Base64는 일반적으로 이진 데이터를 ASCII 문자로 변환하여 전송 중에 잘못 처리되지 않도록 하는 데 사용됩니다. 이메일 및 데이터 전송에 자주 사용됩니다.

Javascript에서 Base64 구현 사용

Javascript에는 이미 Base64 구현이 있으므로 알고리즘을 직접 작성할 필요가 없습니다. window.btoa() 메서드를 사용하여 문자열을 Base64로 인코딩하고 window.atob() 메서드를 사용하여 역디코드할 수 있습니다. 이러한 방법은 ASCII 문자에서만 작동하며 IE9 이하의 브라우저에서는 지원되지 않습니다.

예:

var str = "Hello World";
var encodedString = window.btoa(str); // 编码
var decodedString = window.atob(encodedString); // 解码
console.log(encodedString); // SGVsbG8gV29ybGQ=
console.log(decodedString); // Hello World

그림이나 기타 이진 데이터를 인코딩할 때 이를 window.btoa() 메서드에 이진 데이터 보기로 전달해야 합니다. 예:

var byteArray = new Uint8Array([73, 69, 78, 68, 255, 216, 255]);
var encodedString = window.btoa(String.fromCharCode.apply(null, byteArray)); // 编码
console.log(encodedString); // SU5ET1+J/g==

여기서는 String.fromCharCode.apply(null을 사용합니다. , byteArray)는 바이너리 데이터 뷰를 일반 문자열로 변환한 후 인코딩합니다.

Base64 인코딩 잘못된 문자 문제를 해결하는 방법

Base64 인코딩 잘못된 문자는 일반적으로 다음과 같은 이유로 발생합니다.

1. ASCII가 아닌 문자의 경우 window.btoa() 메서드를 사용하면 인코딩 오류가 발생합니다. 또한 +, /, = 문자와 같은 특정 문자로 인해 인코딩 오류가 발생할 수 있습니다.
2. 어떤 경우에는 Base64 인코딩 후에 브라우저가 자동으로 줄 바꿈을 추가하고
   줄 바꿈을 추가하여 인코딩 오류가 발생할 수 있습니다.
3. 바이너리 데이터를 인코딩할 때는 올바른 방법을 사용하여 문자열로 변환해야 합니다.

이러한 문제를 해결하는 방법은 다음과 같습니다.

1. ASCII가 아닌 문자에 대한 인코딩 오류를 해결하려면: UTF-8로 인코딩된 바이너리 데이터를 지원하는 js-base64 또는 CryptoJS와 같은 타사 라이브러리를 사용할 수 있습니다. . 예:

var str = "你好世界";
var encodedString = window.btoa(unescape(encodeURIComponent(str))); // 使用第三方库
console.log(encodedString); //5L2g5aW977yM5LiW55WM

여기에서는 unescape(encodeURIComponent(str))를 사용하여 UTF-8로 인코딩된 문자열을 ASCII 문자열로 변환한 다음 window.btoa()를 사용하여 인코딩합니다.

2. 자동 추가 및
   줄 바꿈 방지: 그림이나 이진 데이터를 인코딩할 때 배열 버퍼나 Blob 개체를 사용하여 이진 데이터를 전달할 수 있습니다. 예:

var byteArray = new Uint8Array([73, 69, 78, 68, 255, 216, 255]);
var blob = new Blob([byteArray], {type: 'image/jpeg'});
var reader = new FileReader();
reader.onloadend = function() {
  console.log(reader.result);
};
reader.readAsDataURL(blob); // 编码，避免自动添加和
换行符

여기에서는 Blob 개체를 사용하여 이진 데이터를 전달하고 FileReader 개체를 사용합니다. to 데이터 URL로 변환됩니다. 데이터 URL에는 및
개행 문자가 포함되지 않습니다.

3. 이진 데이터를 올바르게 인코딩: 이진 데이터 배열을 문자열로 변환할 때 일반적으로 TextDecoder API 또는 TextEncoder API를 사용하는 올바른 인코딩 방법을 사용해야 합니다. 예:

var byteArray = new Uint8Array([73, 69, 78, 68, 255, 216, 255]);
var decoder = new TextDecoder('utf-8');
var str = decoder.decode(byteArray); // 将二进制数据数组转换为字符串
var encodedString = window.btoa(str); // 编码
console.log(encodedString);

여기에서는 TextDecoder API를 사용하여 바이너리 데이터 배열을 UTF-8 인코딩 문자열로 변환한 다음 window.btoa() 메서드를 사용하여 인코딩합니다.

결론

Javascript에서는 인코딩 및 디코딩에 Base64를 사용하는 것이 효과적인 방법이지만 실제 응용에서는 인코딩 오류 및 문자 깨짐을 방지하기 위해 구현 세부 사항 및 주의 사항에 주의해야 합니다. 인코딩 및 디코딩을 위해 올바른 인코딩 방법과 타사 라이브러리를 사용하고 바이너리 데이터를 인코딩할 때 배열 버퍼 또는 Blob 객체를 사용하면 Base64 왜곡 문제를 해결하는 데 도움이 될 수 있습니다.

위 내용은 자바스크립트 base64 잘못된 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!