Javascript는 이미지의 절대 경로를 base64 인코딩으로 변환합니다.

이번 글에서는 Javascript를 사용하여 이미지의 절대 경로를 base64 인코딩으로 변환하는 방법을 주로 소개하고 있는데 꽤 좋다고 생각해서 지금부터 공유하고 참고하겠습니다. 편집자를 따라가서 살펴보겠습니다. 그것이 모두에게 도움이 되기를 바랍니다.

canvas.toDataURL 메소드를 사용하여 이미지의 절대 경로를 base64 인코딩으로 변환할 수 있습니다. 여기서는 다음과 같이 Taobao 홈페이지의 그림을 참조합니다.

코드는 다음과 같습니다.

var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";

작성합니다.

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, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    var dataURL = canvas.toDataURL("image/"+ext);
    return dataURL;
}
var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
var image = new Image();
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64);
}

크롬의 실행은 다음과 같습니다.

타오바오 서버의 사진을 사용하고 있으며, 결과적으로 로컬 서버 아래에서 접속하고 있는 것으로 파악됩니다. 사진에 도메인 간 문제가 있습니다. 위의 도메인 간 문제는 사진을 로컬 서버에 배치하여 해결할 수 있습니다. 예를 들어, 이제 사진을 로컬 서버 아래에 저장합니다. 다음 코드는 문제를 해결할 수 있습니다:

var img = "http://127.0.0.1/base64/1.jpg";
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, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
      var dataURL = canvas.toDataURL("image/"+ext);
  return dataURL;
}
var image = new Image();
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64);
}

하지만 때때로 우리는 서버 아래의 그림을 해결하는 방법을 참조하고 싶습니다. 다음 코드를 사용하여 Chrome 및 Firefox에서 적용할 수 있습니다. 이는 현재 Safari 6에서 지원되지 않는 것 같습니다.

image.crossOrigin = '';

모든 코드는 다음과 같습니다.

var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
//var img = "http://127.0.0.1/base64/1.jpg";
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, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
  var dataURL = canvas.toDataURL("image/"+ext);
  return dataURL;
}
var image = new Image();
image.crossOrigin = '';
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64);
}

위 코드는 Chrome 및 Firefox에서 작동하며 테스트 후에는 유효하지만 현재 Safari에서는 지원되지 않습니다.

html의 절대 경로와 상대 경로를 사용하는 방법

dirname(__FILE__)을 사용하는 방법 )를 PHP에서 현재 파일의 절대 경로를 가져옵니다

상대 경로와 절대 경로의 차이점을 자세히 설명하세요

위 내용은 Javascript는 이미지의 절대 경로를 base64 인코딩으로 변환합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!