Base64 конвертировать изображения не получить base64 строку

Question

Я convertin изображение в base64 строку, используя следующий код

function getBase64Image() { 
    p = document.getElementById("fileUpload").value; 
    img1.setAttribute('src', p); 
    canvas.width = img1.width; 
    canvas.height = img1.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img1, 0, 0); 
    var dataURL = canvas.toDataURL("image/jpg"); 

    $("#b64").val(dataURL); 
} 

Но что я получаю в dataURL является Data; и есть не base64 строка содержала.

Как я могу получить строку base64 из изображения?

Answer 1

Я думаю, что это может сработать, если вы используете обратный вызов нагрузки, потому что загрузка является асинхронной. не уверен, что ваш FileUpload является Тхо, но если это текстовое поле вставив URL

function getBase64Image() { 
    p = document.getElementById("fileUpload").value; 
    img1.setAttribute('src', p); 
    img1.setAttribute('load', fileLoaded); 
    function fileLoaded(e) { 
     canvas.width = img1.width; 
     canvas.height = img1.height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img1, 0, 0); 
     var dataURL = canvas.toDataURL("image/jpeg"); 
     $("#b64").val(dataURL); 
    } 
} 

тип изображения также изображение/JPEG. jpg не будет работать, или он вернет png, потому что это неверно. и перекрестное происхождение может быть проблемой iirc.

Answer 2

Вот простой пример:

// assuming that you have jQuery lib 

$('#fileUpload').on('change', function(e) { 
    if (this.files.length === 0) return; 

    var imageFile = this.files[0]; 
    var reader = new FileReader(); 

    // when reading of image file completes 
    reader.onloadend = function() { 
    var tempImg = new Image(); 
    tempImg.src = reader.result; 

     // when image is loaded 
    tempImg.onload = function() { 
     canvas.getContext("2d").drawImage(tempImg, 0, 0); 
    } 

    } 

    // start reading 
    reader.readAsDataURL(imageFile); 
}); 

Надеется, что это помогает !!