URLのJPEGをangularjs（ionic）のファイルに保存するにはどうすればよいですか？

Question

ng-srcからbase64dataを取得しましたが、このbase64dataでjpegファイルを作成できません。 は、最初に私がdata:image/jpeg:base64,/9/DEefesdfae453/sdDFEYEUdfdief8fe ...からdata:image/jpeg:base64,チャンクを削除したと$cordovaFileの使用によってtest.jpgファイルを使用して、このデータを書き込む：私が今までに次のようにしようとしています。ここに私のコードは次のとおりです。

 var base64Image = angular.element(document.querySelectorAll('#my-photo')).attr('src'); 

     var writeData = base64Image.replace(/data:image\/jpeg;base64,/g, ''); 

     alert(writeData); 
     // Writing filtered image ----------------------------------------------------------------- 

     $cordovaFile.writeFile(ROOT_DIR + PM_DATA_DIR_NAME + '/', $scope.photo.name, writeData, true) 
      .then(function (success) { 
       // success 
       $ionicLoading.hide(); 
       $ionicPopup.alert({ 
        template : "Updated Photo!!" 
       }); 
      }, function (error) { 
       // error 
       $ionicLoading.hide(); 
       $ionicPopup.alert({ 
        template : "Failed to update Photo!!" 
       }); 
      }); 

しかし、私は、画像ファイルなどのファイルを表示することはできません。黒い画面しか表示されません。 （元のファイルサイズ：19K --->結果ファイルサイズ：66K）

何が悪いのでしょうか？ 私を助けてください。 皆様、お手伝いします。

Answer 1

てFileWriterのwriteメソッドは、base64文字列を取ることはありません。ドキュメント（http://docs.phonegap.com/en/edge/cordova_file_file.md.html#FileWriter）によれば、テキストは書き込まれる前にUTF-8としてエンコードされます。したがって、base64文字列はファイルに書き込まれる前にエンコードされているため、有効な画像データではありません。イメージデータをBlobまたはArrayBufferとして渡す必要があります。これはiOSとAndroidでのみ動作することに注意してください。この回答にジェレミー銀行のb64toBlob機能を見てみましょう：https://stackoverflow.com/a/16245768

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

あなたはwriteメソッドに結果のブロブを渡すことができます。