javascript - 데이터 - 이미지 URL을 Base64로 변환하십시오.

Question

javascript - 데이터 - 이미지 URL을 Base64로 변환하십시오.

javascript image to base64 (4)

이미지 파일을 사용하여 이미지의 URL을 가져 오는 중입니다. 웹 서비스로 보내야합니다. 거기에서 이미지가 내 시스템에 로컬로 저장되어야합니다.

내가 사용하고있는 코드 :

var imagepath = $("#imageid").val();// from this getting the path of the selected image

that var st = imagepath.replace(data:image/png or jpg; base64"/"");

이미지 URL을 BASE64로 변환하는 방법은 무엇입니까?

https://src-bin.com

Answer #1

이 답변보기 : https://.com/a/20285053/5065874 by @HaNdTriX

기본적으로 그는 다음과 같은 기능을 구현했습니다.

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

그리고 귀하의 경우에는 다음과 같이 사용할 수 있습니다.

toDataUrl(imagepath, function(myBase64) {
    console.log(myBase64); // myBase64 is the base64 string
});

Answer #2

이것은 귀하의 html-

    <img id="imageid" src="">
    <canvas id="imgCanvas" />

자바 스크립트는 -

   var can = document.getElementById("imgCanvas");
   var img = document.getElementById("imageid");
   var ctx = can.getContext("2d");
   ctx.drawImage(img, 10, 10);
   var encodedBase = can.toDataURL();

'encodedBase'는 이미지의 Base64 인코딩을 포함합니다.

Answer #3

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
  function encodeImageFileAsURL() {

    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; // <--- data: base64

        var newImage = document.createElement('img');
        newImage.src = srcData;

        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
        alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
        console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
      }
      fileReader.readAsDataURL(fileToLoad);
    }
  }
</script>

Answer #4

let baseImage = new Image;
baseImage.setAttribute('crossOrigin', 'anonymous');
baseImage.src = your image url

var canvas = document.createElement("canvas");
  canvas.width = baseImage.width;
  canvas.height = baseImage.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(baseImage, 0, 0);
  var dataURL = canvas.toDataURL("image/png");

"CORS 사용 가능 이미지"에 대한 추가 정보 : MDN 문서