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

Question

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

这是我上一个问题的链接，我在其中询问如何将 Canvas 转换为图像:javascript- unable to convert canvas to image data

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

将 Canvas 转换为图像的函数

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);

我尝试了 console.log() Canvas 返回的图像，这就是我获得的:

 <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==">

它有图像标签。也许正因为如此；当我将它传递给 PHP 服务时，它无法转换它。这是我调试时返回的结果

object HTMLImageElement

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

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

任何人都可以帮助我理解我在这里缺少什么吗？非常感谢!

引用: https://davidwalsh.name/browser-camera

https://davidwalsh.name/convert-canvas-image

Answer 1

您已经拥有 data URI在src <img>的变量 image 处的元素。传递 src 的值<img>的元素至php ，而不是 html <img>元素。

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