javascript-获取对象HTMLImageElement而不是base64字符串

这是我上一个问题的延续，但是这个问题是新的，这个问题的解决方案没有帮助。这是一个新问题

下面是我上一个问题的链接，我问过如何将画布转换为图像：

我希望得到图像的base64编码字符串，我可以通过AJAX调用将其发送到PHP服务，PHP服务将其转换为图像并将其移动到指定目录

将画布转换为图像的函数

function convertCanvasToImage(canvas) 
{
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

这是我创建的表单：

var url = 'url to php service';
var file =  dataURL; //this is the image url that i'm sending
console.log(file);

var formdata = new FormData();
formdata.append("base64image", file);
formdata.append('csrf_test_name',csrf_token);
var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function(event) {
    uploadcomplete(event);
}, false);
ajax.open("POST", url);
ajax.send(formdata);

我尝试了canvas返回的图像

console.log（）

 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAgAElEQVR4nGzbZ3Mba5au6fqvJ2JiTs/pPtVV20j0sOm9T3iARqI3IOi9SIoGHqATJe29q/v8jXs+QMWeHT0fnkgGyUgCiRfIi2ut9y9OqYGZ3yKqHWHlttFiCz1nE8Q+XuDiuSb5XEBccYgrDv6si5ZTMOZMzHkLMS6gFspI8TxiOEfkfCS0P1AM1lmcPaJYPcbyNvDDHUqVU5zdTaS1j4hFm3Erg5bxCK0KxXiWUm6OcLaAW46xCzZBNcAOF3FzK8TBIoG7QC7v4AUalqdRquVQZxeQa/PYc2vYc2uUnWUCuYovR+TMEoEVY8oOnhES2jlKVo2au0DZXiVSF/DciDDMUyjOEuerGGqJYm6VaG6DhBahOyW8eB4rrBGVl5BmZ5FmZ1HyLlrJZ37ep1jUyXseOdel7FWpBrMUgwXy3ixGJGLlZLRIxipoh...Hd7sRkseD2ebFF/Bj9btUYEnDzGHRy57XgcDiw2WyYDPdYzFp0dgvXBh0XeiPmYBit2YzBbufR4uDR4kBrd3BtNHHvs6ty3HJru+beoUXn0vPgNaD1Gbl1udFYbWhMFlU2E7du+zTmRWt75MGqw+axYvNYebRpMbmNaF0OzEE/+nQAXcrHpeBAk7BzJTm4zXg4Kdq4afq4nGS4fslyO85x1IizEbWwJzo5Lzu4bfk560Y5agY57SfYawS57sS4akfRFJxc5B1cl7XcVh85Gfo47HvYaFvY6ds5Hvg5GQY4bUY5rofQtAUumgk0XVXXozSXQxX+rnsSt20nmrqFG+URbdHMVSOGphbmrCNw1hG46Dg4aaoxP0c1B0dVD7sFO0cFG0cFG+fKNSeyhjPhBI10zmnqnPP0xRQAD1Pqs7CSV7VV3mCztM5Rbpnz8joXHSPXfQuXPQ9XAy9noxgXE4HT/8pz8X/L/D+QyAVhXuteXgAAAABJRU5ErkJggg==">

我尝试使用下面给出的函数将上述图像标记转换为base64，但失败了

function encodeImageFileAsURL(cb) {
    return function(){
        var file = this.files[0];
        var reader  = new FileReader();
        reader.onloadend = function () {
            cb(reader.result);
        }
        reader.readAsDataURL(file);
    }
}

有人能帮我理解我在这里遗漏了什么吗？非常感谢

参考：

您在
元素到
php
的
的
的
src
处已经有了
数据URI，而不是
html
元素

在
到
php
的
元素的
的
src
处已经有了
数据URI，而不是
html
元素

注意，问题的
的
src
是一个有效的
数据URI
，但没有正确编码文件。您确定原始图像具有
MIME
类型
“image/png”
？如何将图像绘制到
元素？是否从其他来源请求原始图像？
canvas
是否受到污染？请参见，您应该将图像作为文件/blob而不是base64发布（它将是~3倍大的上载）注意，
的
src
是一个有效的
数据URI
，但没有正确编码该文件。您确定原始图像具有
MIME
类型
“image/png”
？如何将图像绘制到
元素？是否从其他来源请求原始图像？
canvas
是否受到污染？请看，您应该将图像作为文件/blob发布，而不是作为base64发布（上传的图像将大约3倍）
function encodeImageFileAsURL(cb) {
    return function(){
        var file = this.files[0];
        var reader  = new FileReader();
        reader.onloadend = function () {
            cb(reader.result);
        }
        reader.readAsDataURL(file);
    }
}

var file = image.src; //this is the image url that i'm sending