Javascript 将图像转换为base64可以工作，但不正确

我要将图片转换为base64。因此，在html中，我放置了一个img和画布，显示为：none

html:

<img style="display:none" id="imgDownload" />
<canvas style="display:none" id="myCanvas" />

我有一个base64，但它不好

请参见一个示例：

数据：图像/png；base64，IVBORW0KGGOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=

你可以测试一下

我试着给画布一个高度和宽度，但结果是：

数据：

---

对于不同的图像也是一样，你有什么想法吗？

你试图在图像加载完成之前在画布上绘制图像。
设置

img.src

后，加载图像需要一段时间，因此您必须等待图像加载完成后才能继续操作。
您可以使用

img.onload

进行以下操作：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("imgDownload");
img.crossOrigin = 'anonymous';
img.src = conf.storeUrl + '/' +$scope.fRoot.name + $scope.getFileWay() + value.name;
console.log(img);
ctx.drawImage(img, img.naturalHeight, img.naturalWidth);
var base64Img = c.toDataURL();

---

我试过使用onload，但是onload不起作用。。。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("imgDownload");
img.crossOrigin = 'anonymous';
img.onload = function()
{
    console.log(img);
    ctx.drawImage(img, img.naturalHeight, img.naturalWidth);
    var base64Img = c.toDataURL();
};
img.src = conf.storeUrl + '/' +$scope.fRoot.name + $scope.getFileWay() + value.name;