Wie kann ich ein JPEG von einer URL in eine Datei in angularjs (ionic) speichern?

Question

Ich habe base64data von ng-src, aber ich kann keine JPEG-Datei mit diesem base64data machen. Ich habe jemals versucht, wie folgt: Zuerst habe ich die Chunk von data:image/jpeg:base64,/9/DEefesdfae453/sdDFEYEUdfdief8fe ... entfernt und schreiben Sie diese Daten mit test.jpg Datei mit Hilfe von $cordovaFile. Hier ist mein Code:

 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!!" 
       }); 
      }); 

Aber ich kann nicht die Datei als Bilddatei zeigen. Es zeigt nur schwarzen Bildschirm. (ursprüngliche Dateigröße: 19K ---> Ergebnis Dateigröße: 66K)

Was ist los? Bitte helfen Sie mir. Danke euch allen zu helfen.

Answer 1

Die Write-Methode von FileWriter benötigt keine Base64-Zeichenfolge. Laut der Dokumentation (http://docs.phonegap.com/en/edge/cordova_file_file.md.html#FileWriter) wird der Text vor dem Schreiben als UTF-8 codiert. Daher wird Ihre Base64-Zeichenfolge vor dem Schreiben in die Datei codiert, sodass keine gültigen Bilddaten vorliegen. Sie müssen Ihre Bilddaten als Blob oder ArrayBuffer übergeben. Beachten Sie, dass dies nur auf iOS und Android funktioniert. Werfen Sie einen Blick auf Jeremy Banks’ b64toBlob Funktion in dieser Antwort: 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; 
} 

Sie können die resultierenden Klecks in die Schreib-Methode übergeben.