[JQUERY] Base64로로 변환 이미지 URL

Base64로로 변환 이미지 URL

해결법

1. ---

   1.HTML

   HTML

   <img id=imageid src=https://www.google.de/images/srpr/logo11w.png>
   

   자바 스크립트

   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);base64,/, "");
   }
   
   var base64 = getBase64Image(document.getElementById("imageid"));
   

   이 방법은 완벽하게 지원되는 캔버스 요소를 필요로한다.

2. ---

   2.https://stackoverflow.com/a/20285053/5065874 @HaNdTriX의 :이 답변보기

   https://stackoverflow.com/a/20285053/5065874 @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
   });
   

3. ---

   3.이렇게하면, HTML입니다

   이렇게하면, HTML입니다

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

   자바 스크립트는 BE-한다

      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로 인코딩을 포함합니다.

4. ---

   4.

   <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>
   

5. ---

   5.당신이 중고 수 :

   당신이 중고 수 :

   function ViewImage(){
    function getBase64(file) {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = () => resolve(reader.result);
       reader.onerror = error => reject(error);
     });
   }
   var file = document.querySelector('input[type="file"]').files[0];
   getBase64(file).then(data =>$("#ImageBase46").val(data));
   }
   

   () 귀하의 입력에 onchange를 = 이미지보기를 추가;

6. ---

   6.

   imageToBase64 = (URL) => {
       let image;
       image = new Image();
       image.crossOrigin = 'Anonymous';
       image.addEventListener('load', function() {
           let canvas = document.createElement('canvas');
           let context = canvas.getContext('2d');
           canvas.width = image.width;
           canvas.height = image.height;
           context.drawImage(image, 0, 0);
           try {
               localStorage.setItem('saved-image-example', canvas.toDataURL('image/png'));
           } catch (err) {
               console.error(err)
           }
       });
       image.src = URL;
   };
   
   imageToBase64('image URL')
   

7. ---

   7.

   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 문서

from https://stackoverflow.com/questions/22172604/convert-image-url-to-base64 by cc-by-sa and MIT license