如何獲得用戶上傳的圖片cenverted爲Base64

我已經做了一個簡單的日誌系統中，我從一個文本字符串得到的Base64編碼：如何獲得用戶上傳的圖片cenverted爲Base64

var myString = 'Hello everyone, my name is Dennis'; 
var b64 = btoa(myString); 
var unicode = atob(b64); 
console.log(b64); 
console.log(unicode);

輸出是一個Base64編碼就像我說的，但我正在嘗試將上傳的圖像轉換爲Base64。這是我到目前爲止，我得到的輸出是base64代碼中的整個網頁。我希望有人能幫助我。

function toDataUrl(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.responseType = 'blob'; 
    xhr.onload = function() { 
    var reader = new FileReader(); 
    reader.onloadend = function() { 
     callback(reader.result); 
    }; 
    reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    xhr.send(); 
} 



//use 

var captcha = document.getElementById('logo').src; 
toDataUrl(captcha, function(base64Img) { 
    log(captcha); 
});

在此先感謝！

來源

2017-01-10 Dennis Offinga

可能重複[如何將圖像轉換爲使用javascript的base64字符串]（http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript） –

@GilleQ。對啊，對.. –

@GilleQ。我已經看到這篇文章，但我無法弄清楚，謝謝你的幫助.. –

在那裏，我做你的工作例如，如果重複好好嘗試一下幫助你：（並且要注意CORS的，如果你的形象是不是在請求的同一個域中heberged）

function toDataUrl(src, callback) { 
 
    var img = new Image(); 
 
    img.crossOrigin = 'Anonymous'; 
 
    img.onload = function() { 
 
    var canvas = document.createElement('CANVAS'); 
 
    var ctx = canvas.getContext('2d'); 
 
    var dataURL; 
 
    canvas.height = this.height; 
 
    canvas.width = this.width; 
 
    ctx.drawImage(this, 0, 0); 
 
    dataURL = canvas.toDataURL(); 
 
    callback(dataURL); 
 
    }; 
 
    img.src = src; 
 

 
} 
 

 
toDataUrl("http://i.imgur.com/rx3kylA.png", function(base64Img) { 
 
    console.log(base64Img); 
 
});

來源

2017-01-10 08:52:53

如何獲得用戶上傳的圖片cenverted爲Base64

回答

相關問題