[javascript] Base64로 이미지 변환

Question 1

<input type="file" id="asd"/>

사용자가 (양식을 제출하기 전에) 이미지를 선택하면 base64로 이미지를 얻고 싶습니다.

다음과 같은 것 :

$(input).on('change',function(){
  var data = $(this).val().base64file(); // it is not a plugin is just an example
  alert(data);
});

나는 File API 및 기타 항목에 대해 읽었으며 간단하고 브라우저 간 솔루션을 원합니다 (IE6 / IE7은 분명히 제외됨)

도움을 주셔서 감사합니다.

Question 2

function readFile() {

  if (this.files && this.files[0]) {

    var FR= new FileReader();

    FR.addEventListener("load", function(e) {
      document.getElementById("img").src       = e.target.result;
      document.getElementById("b64").innerHTML = e.target.result;
    });

    FR.readAsDataURL( this.files[0] );
  }

}

document.getElementById("inp").addEventListener("change", readFile);

<input id="inp" type='file'>
<p id="b64"></p>
<img id="img" height="150">

스 니펫 확장

_{( PS : base64 인코딩 이미지 (문자열) 원본 이미지 데이터 크기의 4/3)}

여러 이미지 업로드에 대해이 답변을 확인하십시오 .

브라우저 지원 : http://caniuse.com/#search=file%20api
추가 정보 : https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Question 3

정확히 필요한 것 🙂 콜백 버전 또는 Promise 버전을 선택할 수 있습니다. Promise는 Promise polyfill lib를 사용하는 경우에만 IE에서 작동합니다.이 코드를 페이지에 한 번만 입력하면이 함수가 모든 파일에 나타납니다.

loadend 이벤트는 리소스로드에서 진행이 중지되면 시작됩니다 (예 : “오류”, “중단”또는 “로드”가 전달 된 후).

콜백 버전

        File.prototype.convertToBase64 = function(callback){
                var reader = new FileReader();
                reader.onloadend = function (e) {
                    callback(e.target.result, e.target.error);
                };
                reader.readAsDataURL(this);
        };

        $("#asd").on('change',function(){
          var selectedFile = this.files[0];
          selectedFile.convertToBase64(function(base64){
               alert(base64);
          })
        });

약속 버전

    File.prototype.convertToBase64 = function(){
         return new Promise(function(resolve, reject) {
                var reader = new FileReader();
                reader.onloadend = function (e) {
                    resolve({
                      fileName: this.name,
                      result: e.target.result,
                      error: e.target.error
                    });
                };
                reader.readAsDataURL(this);
        }.bind(this));
    };

    FileList.prototype.convertAllToBase64 = function(regexp){
      // empty regexp if not set
      regexp = regexp || /.*/;
      //making array from FileList
      var filesArray = Array.prototype.slice.call(this);
      var base64PromisesArray = filesArray.
           filter(function(file){
             return (regexp).test(file.name)
           }).map(function(file){
             return file.convertToBase64();
           });
      return Promise.all(base64PromisesArray);
    };

    $("#asd").on('change',function(){
      //for one file
      var selectedFile = this.files[0];
      selectedFile.convertToBase64().
          then(function(obj){
            alert(obj.result);
          });
      });
      //for all files that have file extention png, jpeg, jpg, gif
      this.files.convertAllToBase64(/\.(png|jpeg|jpg|gif)$/i).then(function(objArray){
            objArray.forEach(function(obj, i){
                  console.log("result[" + obj.fileName + "][" + i + "] = " + obj.result);
            });
      });
    })

HTML

<input type="file" id="asd" multiple/>

Question 4

<input type="file" onchange="getBaseUrl()">

function getBaseUrl ()  {
    var file = document.querySelector('input[type=file]')['files'][0];
    var reader = new FileReader();
    var baseString;
    reader.onloadend = function () {
        baseString = reader.result;
        console.log(baseString);
    };
    reader.readAsDataURL(file);
}

Question 5

이 경우 Deferred Object 로 작업하고 promise를 반환하는 것이 유용합니다 .

function readImage(inputElement) {
    var deferred = $.Deferred();

    var files = inputElement.get(0).files;
    if (files && files[0]) {
        var fr= new FileReader();
        fr.onload = function(e) {
            deferred.resolve(e.target.result);
        };
        fr.readAsDataURL( files[0] );
    } else {
        deferred.resolve(undefined);
    }

    return deferred.promise();
}

위의 함수는 다음과 같이 사용할 수 있습니다.

var inputElement = $("input[name=file]");
readImage(inputElement).done(function(base64Data){
    alert(base64Data);
});

또는 귀하의 경우 :

$(input).on('change',function(){
  readImage($(this)).done(function(base64Data){ alert(base64Data); });
});