페이지로드 중 공백이 67 문자마다 입력 요소 값에 삽입됩니다.

Question

문서 준비 이벤트 중에 입력 요소 값에 액세스하는 Angularjs 지시어가 있습니다. 값은 저장된 이미지의 base64입니다.

app.directive('loadPhoto', function() { 
    return function (scope, element, attrs) { 
     //This directive 'load-photo' is required to access the DOM element inside the scope 
     //This will get the Base64 string of the image which is stored in the input element 
     //debugger; 
     angular.element(document).ready(function() { 
      scope.loadPhoto(element[0]); 
     }) 
    } 
}) 

다음은 사진을 흐름 제어로로드하는 기능입니다 (loadPhoto()). 기능 b64toBlob()는 물방울에 Base64로 변환하는 것입니다 :

function b64toBlob(b64Data, contentType, sliceSize) { 
     contentType = contentType || ''; 
     sliceSize = sliceSize || 512; 

     var byteCharacters = atob(b64Data); 
     var byteArrays = []; 

     for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { 
     var slice = byteCharacters.slice(offset, offset + sliceSize); 

     var byteNumbers = new Array(slice.length); 
     for (var i = 0; i < slice.length; i++) { 
      byteNumbers[i] = slice.charCodeAt(i); 
     } 

     var byteArray = new Uint8Array(byteNumbers); 

     byteArrays.push(byteArray); 
     } 

     var blob = new Blob(byteArrays, {type: contentType}); 
     return blob; 
} 
     $scope.loadPhoto = function (elem) { 

      //Load photo from Database 
      //The photo Base64 is stored in the input element 'elem' 
      //debugger; 

      $scope.photosLoadingDone = false;  //Used to indicate photo is being loaded from Database. 
      //console.log('$scope.loadPhoto - $scope.imageStringB64 = ', $scope.imageStringB64); 
      var blobImage; 
      var tmpBase64; 

      //Load the photo using flow controller 
      //Wait until document is ready to make sure that the input element has the Base64 string of the image 
      tmpBase64 = angular.element(elem).val(); //$scope.imageStringB64; 
      if (tmpBase64) { 
       //Convert Base64 to Blob object 
       blobImage = b64toBlob(tmpBase64, 'image/png'); 
       blobImage.name = "image.png"; 
       //Add the Blob object to flow files. 
       $scope.$flow.addFile(blobImage); 
      } 
      /*$timeout(function() { 
       //debugger; 
       //tmpBase64 = $scope.imageStringB64; 
       tmpBase64 = $(elem).val(); 
       blobImage = b64toBlob(tmpBase64, 'image/png'); 
       blobImage.name = "image.png"; 
       $scope.$flow.addFile(blobImage); 
      }, 600)*/ 
      $scope.photosLoadingDone = true; //Photo loading done. 
     } 

의 I는 IE가 페이지로드시 자바 스크립트 오류 InvalidCharacterError를보고하고, 이미지가 흐름 제어에로드되지 않았 음을 발견 할 때까지 위의 사실, 잘 노력하고 있습니다. 그러나 크롬은이 오류를보고하지 않으며 정상적으로 작동합니다. 자세한 내용은 아래 스냅 샷을 참조하십시오.

loadPhoto()의 코드 실행 중에 지시문/함수에 입력 요소 값인 element[0].value에 공백이 추가되었습니다. 그런 다음 페이지가로드 된 후 $('#additional_image1').val()을 사용하여 입력 요소 값을 확인할 때 값에 공백이 표시되지 않습니다. 이유는 무엇입니까?

값에서 모든 공백을 제거하면 문제가 해결됩니다. 그러나, 왜 이런 일이 일어나는지 알아야합니다.

페이지로드 중 빈 공간을 추가하지 못하도록 input 요소를 구성하는 방법이 있는지 알고 싶습니다.

Answer 1

는 I 기능 b64toBlob() b64Data.replace(/[\s]/g, '')에 사용하여 문제가 IE에서 해결된다. 그러나 이것이 왜 처음에 일어나는 지 잘 모르겠습니다.

function b64toBlob(b64Data, contentType, sliceSize) { 
     contentType = contentType || ''; 
     sliceSize = sliceSize || 512; 

     var byteCharacters = atob(b64Data.replace(/[\s]/g, '')); 
     var byteArrays = []; 

     for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { 
     var slice = byteCharacters.slice(offset, offset + sliceSize); 

     var byteNumbers = new Array(slice.length); 
     for (var i = 0; i < slice.length; i++) { 
      byteNumbers[i] = slice.charCodeAt(i); 
     } 

     var byteArray = new Uint8Array(byteNumbers); 

     byteArrays.push(byteArray); 
     } 

     var blob = new Blob(byteArrays, {type: contentType}); 
     return blob; 
}