Исправить функцию преобразования изображения в base64 по ссылке

Question

Есть функция(не мной написанная) преобразования изображения в base64 из ссылки на это изображение.

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

Но с ней можно работать только таким образом:

var pic = 'http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png';
convertImgToBase64URL(pic, function(base64Img){
$('#id').attr('href', base64Img);
   });

Что вообще никак не удобно. Как исправить функцию, чтобы она возвращала значение, а использовать ее можно было как и должно?

 convertImgToBase64URL(pic); //где pic ссылка на изображение

Пытался разобраться с помощью темы: Как вернуть значение из события или из функции обратного вызова? Или хотя бы дождаться их окончания Но никак не получается. Я знаю, что мне надо вернуть значение dataURL но любое обращение к нему вызывает ошибку.

Answer 1

чтобы прям вернула - это асинхронная функция из-за onload. Так что в любом случае надо ждать окончания её работы.

var resultDiv = document.getElementById('result');

function convertImgToBase64URL(url){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'), dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL();
        resultDiv.innerHTML = dataURL;
        console.log(dataURL);
        canvas = null; 
    };
    img.src = url;
}

convertImgToBase64URL('http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png');