ファイルのURLをパスに変換し、JavaScriptのファイルリーダーに送信します。

Question

私はコードバーカメラのプラグインを使用してギャラリーから画像を取得していますが、今はファイルリーダーにURlを渡す必要があります。ファイルリーダーでエラーが発生しました成功コールバックでエラーが発生しました：Camera1358190195 = TypeError： 'FileReader'で 'readAsArrayBuffer'を実行できませんでした：パラメータ1のタイプが 'Blob'ではありません 'readAsBinarystring' 。

//Cordova Camera Plugin 

function PicfromGallery() { 
var pictureSource = navigator.camera.PictureSourceType; 
var destinationType = navigator.camera.DestinationType; 
navigator.camera.getPicture(onSuccessEdituserProfileGallery, onFailEditProfileGallery, { 
    quality: 50, 
    sourceType: pictureSource.PHOTOLIBRARY, 
    destinationType: destinationType.FILE_URI, 
    targetWidth: 100, 
    targetHeight: 100 

}); 
} 

function onSuccessEdituserProfileGallery(imageData) { 
var smallImage 
smallImage = document.getElementById('userProfileImage'); 
//EditUserProfileImageFilename(imageData); 
smallImage.src = imageData; 
var userPic = document.getElementById('EdituserProfileImage'); 
var file = new File(imageData); 
OnFileImageEntry(file) 
} 

//File API 
function OnFileImageEntry(file) { 
var reader = new FileReader(); 
reader.onload = function (event) { 
    var image = event.target.result; 
    image.onload = function() { 
     // need to get result 
    } 
    }; 
reader.readAsBinaryString(file); 
} 

Answer 1

解決策はcordova-plugin-camera documentです。

Fileオブジェクトをnew File(imageData)で作成する代わりに、FileURIをwindow.resolveLocalFileSystemURL()で解決できます。

//Cordova Camera Plugin 

function PicfromGallery() { 
    var pictureSource = navigator.camera.PictureSourceType; 
    var destinationType = navigator.camera.DestinationType; 
    navigator.camera.getPicture(onSuccessEdituserProfileGallery, onFailEditProfileGallery, { 
     quality: 50, 
     sourceType: pictureSource.PHOTOLIBRARY, 
     destinationType: destinationType.FILE_URI, 
     targetWidth: 100, 
     targetHeight: 100 

    }); 
} 

function onSuccessEdituserProfileGallery(imageData) { 
    var smallImage; 
    smallImage = document.getElementById('userProfileImage'); 
    smallImage.src = imageData; 
    var userPic = document.getElementById('EdituserProfileImage'); 
    // var file = new File(imageData); 
    OnFileImageEntry(imageData); // Use the fileURI directly. 
} 

//File API 
function OnFileImageEntry(file) { 
    window.resolveLocalFileSystemURL(i, function (fileEntry) { 
     fileEntry.file(function (file) { 
      console.log('Now I have a file obj.'); 
      var reader = new FileReader(); 
      reader.onloadend = function (event) { 
       var image = event.target.result; 
       // Do something with the image 
      }; 
      reader.readAsArrayBuffer(file); 

     }, function (e) { 
      console.log('Error getting file', e); 
     }); 
    }, function (e) { 
     console.log('Error resolving fs url', e); 
    }); 
} 

ところで、FileReader.readAsBinaryString()は廃止です。それを使用しないでください！これはもうW3C File API working draftにはありません。

MozillaはまだreadAsBinaryString()を実装しており、MDN FileApi documentationにそれを記述しています。

さらに詳しい情報をお読みください：An answer of fileReader.readAsBinaryString to upload files