jQuery Ajax：在beforeSend之前設置dataUrl

Question

此AJAX請求不會像應有的那樣在beforeSend處理程序中返回任何64值字符串。 但是作為該功能的alert ！ 我不知道如何做到這一點。 有什么問題？

$imageMaps[0] = '1.jpeg';
$imageMaps[1] = '2.jpeg';

for (var k in $imageMaps) {
    $file = $imageMaps[k];
    $.ajax({
        type: "POST",
        async: 0,
        beforeSend: function (xhr, settings) {
            $base64 = convertImgToBase64($file);
            alert($base64)
            settings.data.img = $base64;
            settings.data.url = $file;
        },
        url: '/request.php?imagePost=1',
        data: {
            img: '',
            url: $file
        },
        success: function () {}
    });
}

function convertImgToBase64(url) {
    var img = new Image();
    img.src = url;
    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);
        dataurl = canvas.toDataURL("image/png");
        alert(dataurl)
        return dataurl;
    }
}

Answer 1

您實際上沒有從該函數返回任何內容。 嘗試這樣做：

function convertImgToBase64(url) {
    var img = new Image();
    img.src = url;
    return 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);
        dataurl = canvas.toDataURL("image/png");
        alert(dataurl)
        return dataurl;
    }
}

我可能是錯的，所以如果不起作用，請對其進行評論。

Answer 2

解決方法如下：

    $imageMaps[0] = '1.jpeg';
    $imageMaps[1] = '2.jpeg';

    for (var k in $imageMaps) {
        $file=$imageMaps[k];
         convertImgToBase64($url, function($base64Img,$url2){
                     $.ajax({
                      type: "POST", 
                      async : 1,
                      url: '/request.php?imagePost=1',
                      data: {img:$base64Img,url:$url2},
                      xhr: function() {},
                      success: function(){}
                        });
            }) 
    }

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

}