使用PhoneGap，在iPhone上从照片库中选择照片后如何获取其base64图像数据

Question

使用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图像数据？

- Revathy Durairajan

Answer 1

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()给了我这个格式 :-)

- Revathy Durairajan

---

我认为这实际上不起作用。图片不是异步加载吗？它不会在图片加载之前返回吗？ - gen_Eric

是的...我也遇到过同样的问题。你需要将base64字符串存储在某个隐藏的文本框中，然后在需要时提交它。 - Revathy Durairajan

@RocketHazmat 我也遇到了同样的问题，即在循环完成后才获取到dataURL，但我希望在循环中同时为每个图像获取。 - Saurabh Android

@RevathyDurairajan，我该如何将每个图像的DataURL保存在文本框中？您能否通过示例解释一下这个循环过程。先感谢您。 - Saurabh Android

Answer 2

您只需要告诉它从照片库中选择即可：

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

请注意，加载大型base64编码的图像可能会导致您的应用程序出现内存不足错误。尽可能使用FILE_URI来获取您的照片。

- Simon MacDonald

---

Simson.. 是的！你提供的代码片段可以让你从库中选择照片。但是我想将其裁剪后的图像以Base64格式保存到服务器上。它只返回FILEURI...我应该使用什么方法来获取该图像的BASE64格式？ - Revathy Durairajan

这不是你在问题中所问的。请返回并编辑问题以获得更清晰的表述。 - Simon MacDonald

Answer 3

这是一个获取base64图像的好方法，但当显示此功能返回的base64字符串时，它会显示一张白色图像。我的代码如下：

var smallImage = document.getElementById('smallImage');
                smallImage.src = encodeImageUri(imageURI);

- Awais Rai

Answer 4

试试这个：https://github.com/brianvandelden/acato-service-image。它使用了imagePicker.git cordova插件，具有从所选图片获取图像数据的功能。

- Brian

Answer 5

您可以使用此插件获取图像的base64编码，它使用iOS的js代码，但在Android的情况下，它使用本机代码来处理低于v.3的Android版本，因为低于3的Android版本无法处理toDataUrl功能。

- Hazem Hagrass

Answer 6

试一下这个。

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

- StartCoding