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转换为Blob：

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，并且图像未加载到流控件中。但是，chrome没有报告此错误，并且工作正常。有关详细信息，请参阅下面的快照。

在loadPhoto()指令/函数的代码执行期间，在输入元素值element[0].value中添加了空格。然后，在加载页面后，当我使用$('#additional_image1').val()检查输入元素值时，我在值中看不到空格，为什么？

在我看来，如果我从值中删除所有空格，它将解决问题。但是，我需要知道为什么会这样。

我想知道是否有办法配置input元素以防止它在页面加载期间添加空格。

Answer 1

我在函数b64Data.replace(/[\s]/g, '')中使用了b64toBlob()，问题在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;
}

在页面加载期间，每67个字符

1 个答案: