Javascript HTML5等待画布加载，然后查找base64

添加等待直到加载完整画布，然后查找该画布的base64，而不是使用时间

function make_base(bg_img, width, height)
{
return new Promise(function(resolve, reject) {
  base_image = new Image();
  base_image.src = bg_img;
  base_image.onload = function(){
  ctx.drawImage(base_image, 0, 0, width, height);
  resolve()
  }
  })
}

function loadCanvas(width, height) {
    canvas = document.getElementById('canvas');
    canvas.id = "canvas";
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");
    canvas.style.zIndex   = 8;
    setTimeout(function() {
    base64 = canvas.toDataURL("image/jpeg",1);
    console.log(base64);
}, 3500);
}

function fillText(name, x_name, y_name, name_color, name_font) {
ctx.fillStyle = name_color;
ctx.font = name_font;
ctx.fillText(name, x_name, y_name);
}

在这里，加载画布有时需要时间。因为我为base64 Url设置了3.5秒，有时画布内容不会加载，但我会得到空白的base64

function work() {
loadCanvas(x,y)
make_base(xxxxx).then(function () {
fillText(abcd)
})
}

---

如何等待base64直到加载完整画布。

我不知道发生了什么，但这可能是您问题的解决方案

当你得到base64字符串时，你说它有时是空的。好。将该字符串放在一边（在

BASE64\u NOT\u READY

中），并使用它来区分就绪和未就绪，如下所示：

var interval = setInterval(function () {
  base64 = canvas.toDataURL("image/jpeg", 1);

  if (base64 !== BASE64_NOT_READY)
  {
    // ready, break interval and proceed
    clearInterval(interval);
    console.log(base64);
  }
}, 100); // check every 100 ms, actual time depends on way too many factors

您需要的是确定字符串：

var BASE64_NOT_READY = "???";

---

您可以使用自己的代码来确定它。更换

？

，您应该是金色的

只需将导出部分移动到另一个函数中，您将在承诺链末尾调用该函数：

var画布，ctx；
工作（）
.then（函数（url）{
var img=新图像（）；
img.src=url；
文件.正文.附件（img）；
}).catch（控制台错误）；
函数导出_canvas（）{
base64=canvas.toDataURL（“image/jpeg”，1）；
console.log（base64）；
返回base64；
}
函数make_base（背景图像、宽度、高度）{
返回新承诺（功能（解决、拒绝）{
基本图像=新图像（）；
base_image.crossOrigin=“匿名”；
base_image.src=bg_img；
base_image.onload=函数（）{
ctx.drawImage（基础图像，0，0，宽度，高度）；
解决（）；
}
});
}
功能设置画布（宽度、高度）{
canvas=document.getElementById（“canvas”）；
canvas.id=“canvas”；
画布宽度=宽度；
canvas.height=高度；
ctx=canvas.getContext（“2d”）；
canvas.style.zIndex=8；
}
函数填充文本（名称、x\u名称、y\u名称、名称颜色、名称字体）{
ctx.fillStyle=名称\颜色；
ctx.font=名称\字体；
ctx.fillText（名称、x_名称、y_名称）；
}
职能工作（）{
设置画布（80,40）；
返回make_base（“https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png", 40, 40)
.然后（函数（）{
填充文本（“abcd”，40，10，“红色”）；
//准备出口
返回导出画布（）；
});
}

---

画布不会加载，除了它的

toBlob

方法外，我认为一切都是同步的（至少在2D API中是如此）。您可能会混淆HTMLImageElement，对于HTMLImageElement，您确实需要等待其加载事件才能使用它，例如与

ctx.drawImage（img，x，y）

一起使用。但是您的代码没有这样的图像，所以不清楚您在等待什么…canvas确实有bg。我已经更新了代码。只需将toDataURL从初始化函数中移出，并在

make\u base中调用它。然后改为
callback？为什么要在
loadCanvas
中使用它？这正好解决了我的问题。你能帮我加载条吗？函数加载（）{$（“#加载屏幕”）.show（）.delay（3500）.fadeOut（）}这是我的加载函数，我也在其中设置了超时。在整个画布加载并创建base64之前，我可以显示它吗。