ページロード中、空白は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()は、BLOBへの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. 
     } 

私はIEがページのロード時にJavaScriptエラー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; 
}