캔버스 요소를 사용하여 이미지 URL을 Base64로 변환하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

캔버스 요소를 사용하여 이미지 URL을 Base64로 변환하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-10-29 08:41:02

원래의

488명이 탐색했습니다.

How to Convert an Image URL to Base64 Using the Canvas Element?

이미지 URL을 Base64로 변환하는 방법

이미지의 URL을 획득하여 저장이나 추가 처리에 활용해야 하는 경우, Base64 표현이 중요해집니다. 이 변환을 달성하기 위한 효과적인 방법을 살펴보겠습니다.

캔버스 요소 활용

이 접근 방식은 널리 지원되고 JavaScript에서 캔버스 조작을 허용하는 HTML5 캔버스 요소를 사용합니다.

<code class="html"><img id="imageid" src="https://example.com/image.jpg"></code>

로그인 후 복사

<code class="javascript">// Created by Md. Hasan Mahmud
function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg|jpeg|svg)*;base64,/, "");
}

var base64Image = getBase64Image(document.getElementById("imageid"));</code>

로그인 후 복사

canvas.toDataURL()을 활용하면 이미지가 캔버스에 그려지고 해당 데이터가 Base64 문자열로 변환됩니다. 결과 문자열에는 MIME 유형 접두사가 붙은 이미지 데이터가 포함됩니다.

우리 코드에서는 MIME 유형과 ","를 제거하는 정규식과 함께 교체 메소드를 사용하여 Base64 문자열을 구체화합니다.

<code class="javascript">var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg|jpeg|svg)*;base64,/, "");</code>

로그인 후 복사

이를 통해 웹 서비스로 전송하거나 로컬에 저장하는 등 필요한 모든 목적에 사용할 수 있는 순수 Base64 문자열을 얻을 수 있습니다.

위 내용은 캔버스 요소를 사용하여 이미지 URL을 Base64로 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!