7

PhoneGap（Cordova）を使用して、フォトライブラリから選択した写真のbase64画像データを取得しようとしています。

私はそれを行うことができました..写真がカメラからキャプチャされたときに、Cordovaの以下のコードスニペットを使用します。

    navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.DATA_URL
 }); 

function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
    alert('Failed because: ' + message);
}

しかし、写真がライブラリから選択されたときにbase64画像データを取得するにはどうすればよいですか？

4

6 に答える 6

14 
function encodeImageUri(imageUri)
{
     var c=document.createElement('canvas');
     var ctx=c.getContext("2d");
     var img=new Image();
     img.onload = function(){
       c.width=this.width;
       c.height=this.height;
       ctx.drawImage(img, 0,0);
     };
     img.src=imageUri;
     var dataURL = c.toDataURL("image/jpeg");
     return dataURL;
}

PhoneGapにはこれに対する解決策がありません。したがって、必要なのは、ユーザーがフォトライブラリから選択した画像のbase64形式だけです。だから私はその画像をキャンバスに配置し、toDataUrl（）は私にまさにフォーマットを与えました:-)

于 2012-06-28T14:23:03.437 に答える
4

フォトライブラリから選択するように指示する必要があります。

navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.DATA_URL,
    sourceType : Camera.PictureSourceType.PHOTOLIBRARY
});

大きなbase64でエンコードされた画像を読み込むと、アプリでメモリ不足エラーが発生する可能性があることに注意してください。可能な限り、FILE_URIを使用して写真を取得してください。

于 2012-06-25T14:16:36.680 に答える
2

base64で画像を取得するのに良い方法ですが、この関数によって返されるshowbase64文字列はいつですか。白い画像が表示されます。私のコードは次のとおりです

var smallImage = document.getElementById('smallImage');
                smallImage.src = encodeImageUri(imageURI);
于 2012-11-05T11:56:18.397 に答える
0

このプラグインを使用して、画像のbase64エンコーディングを取得できます。iOS用のjsコードを使用しますが、Androidの場合、3より前のAndroidバージョンはtoDataUrlを処理しないため、v.3より前のAndroidバージョンを処理するためにネイティブコードを使用します。機能性

于 2014-03-26T10:44:46.177 に答える
0

これを試してみてください。

function getPhoto(source) {
    // Retrieve image file location from specified source
    navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
} 

function onPhotoURISuccess(imageURI) {

    window.resolveLocalFileSystemURI(imageURI, gotFileEntry, failSystem);

}
function onFail(message) {
    alert('Failed because: ' + message);
}
var gotFileEntry = function(fileEntry) {
   // alert(fileEntry.fullPath);
    console.log("got image file entry: " +  fileEntry.fullPath);
//convert all file to base64 formats
    fileEntry.file( function(file) {
//uncomment the code if you need to check image size
       //if(file.size>(1049576/2))
      // {
           //alert('File size exceeds 500kb');
          // return false;
      // }
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read complete!");
            $('yourimageidtoshow').attr('src',  evt.target.result);
        };
        reader.readAsDataURL(file);
    }, failFile);
};
var failSystem=function(){
    console.log('failed');

}
var failFile=function(){

    console.log('failed');
    throw "toobig";
};
于 2014-07-04T11:25:20.967 に答える
0

これを試してください：https ：//github.com/brianvandelden/acato-service-image 。imagePicker.gitcordovaプラグインを使用します。選択した画像からimageDataを取得する機能付き。

于 2015-07-24T13:41:27.527 に答える