Sử dụng PhoneGap, Cách lấy dữ liệu ảnh base64 của ảnh được chọn từ thư viện ảnh trong iPhone

Question

Sử dụng PhoneGap (Cordova), Đang cố gắng lấy dữ liệu ảnh base64 của ảnh được chọn từ thư viện ảnh.

Tôi có thể làm điều đó .. khi ảnh được chụp từ máy ảnh, Với đoạn mã dưới đây trong 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); 
} 

Nhưng, tôi nên làm gì để lấy dữ liệu ảnh base64 khi ảnh được chọn từ thư viện?

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

Tôi không có giải pháp nào trong PhoneGap cho việc này. Vì vậy, tất cả những gì tôi cần là định dạng base64 của hình ảnh đã được người dùng lựa chọn từ thư viện ảnh của họ. Vì vậy, tôi đã đặt hình ảnh đó lên canvas và toDataUrl() cho tôi định dạng :-)

Answer 2

Bạn chỉ cần nói với nó để chọn từ thư viện ảnh:

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

Xin lưu ý rằng tải một lượng lớn cơ sở 64 hình ảnh được mã hóa chỉ có thể gây ra lỗi bộ nhớ trong ứng dụng của bạn. Bất cứ nơi nào có thể, hãy sử dụng FILE_URI để tải ảnh của bạn.

Answer 3

Đây là cách tốt để tải hình ảnh ở base64 nhưng khi hiển thị chuỗi base64 được hàm này trả về. Nó hiển thị cho tôi một hình ảnh trắng. Mã của tôi là như sau

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

Answer 4

Bạn có thể sử dụng plugin này để giúp bạn mã hóa base64 của hình ảnh, nó sử dụng mã js dành cho iOS, nhưng trong trường hợp của android nó sử dụng mã nguồn gốc để xử lý các phiên bản Android thấp hơn thì v .3 bởi vì các phiên bản Android thấp hơn sau đó 3 không xử lý toDataUrl chức năng

Answer 5

Hãy thử điều này.

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

Answer 6

Hãy thử cái này: https://github.com/brianvandelden/acato-service-image. Nó sử dụng plugin cordova imagePicker.git. Với một hàm để lấy imageData từ các ảnh đã chọn.