base64를 이미지 자바스크립트로 변환

프런트 엔드 개발에서는 웹 페이지에 표시하기 위해 Base64로 인코딩된 문자열을 이미지로 변환해야 하는 경우가 많습니다. 이 변환을 통해 이미지를 동적으로 로드하고 서버 지원 없이 페이지에 표시할 수 있습니다. 다음으로 이 기사에서는 JavaScript를 사용하여 Base64로 인코딩된 문자열을 이미지로 변환하는 방법을 소개합니다.

1. Base64 인코딩의 원리

Base64 인코딩은 바이너리 데이터를 인쇄 가능한 ASCII 문자로 변환하는 인코딩 방법입니다. 3바이트마다 4개의 문자로 변환하고 끝에 "=" 기호를 추가합니다(필요한 경우).

예를 들어 16비트 이진수 1111010100110000은 Base64로 인코딩된 문자열 "5q0="으로 변환될 수 있습니다. 변환 과정은 다음과 같습니다:

1. 11110101을 6자리 숫자 111101과 010011 두 개로 나눕니다.
2. 6자리 숫자 두 개 끝에 0 두 개를 추가하면 11110100과 01001100이 됩니다.
3. 이 두 개의 8비트 배열을 16비트 이진수 1111010001001100으로 결합합니다.
4. 이 이진수를 십진수로 변환하면 61676이 됩니다.
5. 61676을 Base64로 인코딩된 문자 "5q0="으로 변환합니다.

2. Base64 인코딩을 JavaScript의 이미지로 변환

프런트 엔드 개발에서는 종종 Ajax 비동기 요청을 사용하여 Base64 인코딩 문자열을 얻은 다음 이를 이미지로 변환하여 웹 페이지에 표시합니다. JavaScript를 사용하여 Base64로 인코딩된 문자열을 이미지로 변환하는 방법에 대한 단계는 다음과 같습니다.

1. 이미지를 표시하려면 a1f02c36ba31691bcfe87b2722de723b 태그를 생성하세요.

<img id="img" src="" alt="image">

2. Base64로 인코딩된 문자열을 가져와서 a1f02c36ba31691bcfe87b2722de723b 태그의 src 속성에 할당하세요.

let base64Img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxglj
NBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

document.getElementById("img").src = base64Img;

3. Base64로 인코딩된 문자열을 얻고 처리하기 위해 JavaScript 코드를 사용해야 하는 경우 캔버스를 사용하여 변환할 수 있습니다. 다음은 캔버스를 통해 이미지를 Base64로 인코딩된 문자열로 변환하는 샘플 코드입니다.

let img = document.createElement("img");
img.src = "image.png";

img.onload = function() {
  let canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  let ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  let base64Img = canvas.toDataURL("image/png");

  document.getElementById("img").src = base64Img;
}

위는 Base64 인코딩을 이미지로 변환하는 방법입니다. 이 방법을 통해 Base64로 인코딩된 이미지를 웹 페이지에 쉽게 표시할 수 있습니다.

위 내용은 base64를 이미지 자바스크립트로 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!