Base64で画像をエンコードすると正しく表示されます。レスポンスはnilです

Question

URLからBase64で画像をエンコードしようとしています。

function getBase64Image(url) { 
    var img = new Image(), 
     response = ''; 

    img.setAttribute('crossOrigin', 'anonymous'); 
    img.onload = function() { 
    var canvas = document.createElement('canvas'); 
    canvas.width = this.width; 
    canvas.height = this.height; 

    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(this, 0, 0); 

    var dataURL = canvas.toDataURL('image/png'); 
    response = dataURL; 
    alert(response); 
    }; 

    img.src = url; 
    return response; 
} 

alert()が正常に動作しますが、応答はnilです：

私はそうのような応答をlog場合は、スクリーンショットのコンソールで見ることができるが、（それがスクリーンショットに二回行われています）それは何も返しません：

console.log(getBase64Image('<%= asset_path "test.jpg" %>')); 

明らかに、アラートにはエンコードがあるため、イメージを読み取ることができます。私は何が欠けていますか？

更新

関連JSFiddle：https://jsfiddle.net/guxzxq20/3/

Answer 1

アプローチ：キャンバス

ロードイメージ・オブジェクトにイメージは、非汚染されたキャンバスに、それをペイントし、バックdataURLにキャンバスを変換します。

function convertImgToDataURLviaCanvas(url, callback, outputFormat) { 
    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(outputFormat); 
    callback(dataURL); 
    canvas = null; 
    }; 
    img.src = url; 
} 

呼び出し方法は間違いなく_slightly_を助けた

convertImgToDataURLviaCanvas('http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png',function(response){ 
alert(response) 
}); 

Answer 2

私はonLoad()関数内response対象外responseにアクセスしていないので、あなたは、あなたが作成した空のresponseオブジェクトを返していると信じています。

onload()の機能が終了したらコールバックを呼び出すようにコードを変更し、そのコールバックを使用して警告してください。 何かのように：

function getBase(url, callback) { 
    // ... code 

    img.onload = function() { 
     // ... code 

     callback(response); 
    } 
} 

これは非常に生の例でした。