Cách mã hóa base64 hình ảnh trong javascript

Question

Tôi đang phát triển ứng dụng Phonegap và sử dụng phương thức navigator.getPicture để tải hình ảnh.

Con đường tôi đang nhận được hình ảnh là:

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

function onSuccess(imageURI) { 
    var image = document.getElementById('myImage'); 
    image.src = imageURI; 
} 

Cũng giống như ví dụ trong PhoneGap doc của.

Tôi muốn có thể sử dụng imageURI và sau đó chuyển đổi nó thành dữ liệu hình ảnh để tải lên sau. (Tôi không muốn sử dụng FileTransfer PhoneGap của)

Cho đến nay tôi đã thử cả hai Get image data in JavaScript? và How can you encode a string to Base64 in JavaScript?

Khi tôi cố gắng sau,

function onSuccess(imageURI) { 
    getBase64Image(imageURI); 
} 

function getBase64Image(img) { 
    // Create an empty canvas element 
    var canvas = document.createElement("canvas"); 
    canvas.width = img.width; 
    canvas.height = img.height; 

    // Copy the image contents to the canvas 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 

    // Get the data-URL formatted image 
    // Firefox supports PNG and JPEG. You could check img.src to 
    // guess the original format, but be aware the using "image/jpg" 
    // will re-encode the image. 
    var dataURL = canvas.toDataURL("image/png"); 

    console.log(dataURL); //here is where I get 'data:,'  

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

Và in dataURL trước khi trở về. Tôi chỉ nhận được data:, làm nội dung.

Bất kỳ ý tưởng nào về những gì tôi đang làm sai?

Answer 1

Bạn có thể thử sử dụng nó làm DATA_URL. Số dặm của bạn có thể thay đổi khi bạn có thể gặp phải lỗi hết bộ nhớ khi hình ảnh được chuyển thành chuỗi Base64.

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

function onSuccess(imageURI) { 
    var image = document.getElementById('myImage'); 
    image.src = imageURI; 
} 

Hoặc bạn có thể sử dụng FileReader.readAsDataURL().

Phương thức canvas.toDataURL không được triển khai trên các phiên bản Android trước đó.