이미지를 base64로 변환

[Clique aqui para ler em português]

JavaScript로 이미지를 base64로 변환하고 그 반대로 하여 base64를 이미지로 변환하는 도구를 만들어 보겠습니다.

암호

먼저 인터페이스를 만들고 HTML만 사용하여 간단한 작업을 수행합니다.

<input type="file"><br>
<textarea></textarea>
<img width="100" alt="Prévia da imagem...">
<button type="button">Download</button>

여기에 파일 유형 입력이 있고 이미지 업로드가 수신되며 base64 이미지가 위치할 텍스트 영역도 있으며 이미지 미리보기가 있을 img 태그도 있고 마지막으로 다운로드 버튼을 다운로드할 수 있는 다운로드 버튼도 있습니다. 영상.

이제 JavaScript 부분을 시작하겠습니다.

document.getElementsByTagName("input")[0].addEventListener("change", previewFile);
document.getElementsByTagName("textarea")[0].addEventListener("input", previewText);
document.getElementsByTagName("button")[0].addEventListener("click", downloadFile);

let preview = document.querySelector('img');

function previewFile(event) {
  let reader = new FileReader();
  let file = event.target.files[0];

  reader.readAsDataURL(file);
  reader.onloadend = () => {
    preview.src = reader.result;
    document.getElementsByTagName("textarea")[0].value = reader.result;
  };
}

먼저 input , textarea 및 button 에 대한 이벤트를 추가한 다음 preview 변수가 있고 마지막으로 previewFile 함수가 있습니다. 이 함수에서 FileReader를 사용하여 도움을 줍니다. 미리보기에 이미지가 로드되고( onloadend ) base64 코드가 textarea 에 추가된 후 이미지 로드 작업을 합니다.

function previewText(event) {
  let file = event.target.value.replace(/^data:image\/[a-z]+;base64,/, "");
  preview.src = `data:image/png;base64,${file}`;
}

function downloadFile() {
  let nameFile = "Image.png";
  var a = document.createElement("a");
  a.href = preview.src;
  a.download = nameFile;
  a.click();
}

이제 두 가지 기능이 더 있습니다.

PreviewText = 여기에서 수신된 텍스트를 textarea 가져오고 preview 를 추가하여 base64를 이미지로 변환합니다.

DownloadFile = 여기에서 preview 에 나타나는 이미지를 다운로드합니다.

그렇게 간단하게 준비했습니다.

데모

아래에서 작업하는 전체 프로젝트를 참조하세요.

유튜브

시청을 선호하는 경우 youtube(PT-BR의 비디오)에서 개발 내용을 확인합니다.

읽어 주셔서 감사합니다!

질문, 불만 사항 또는 팁이 있는 경우 여기에 의견을 남길 수 있습니다. 기꺼이 답변해 드리겠습니다!

😊😊 또 만나요! 😊😊