Javascript Html画布在附加时未呈现，然后使用jquery绘制然后分离

我正在使用剑道ui绘图api获取网页某一部分的屏幕截图。api将图像作为数据uri返回，然后使用该uri生成图像节点

data = "data:image/png;base64,iVBORw0...."
var imageNode = document.createElement("img");
imageNode.src = data;

然后我创建一个新画布并将其附加到body元素，在上面绘制图像，最后使用jQuery将其与body分离

var canvas = document.createElement("canvas");
canvas.id = "some_random_id";
canvas.width = 1650;
canvas.height = 720;

$("body").append($(canvas));

var ctx = canvas.getContext("2d");
ctx.drawImage(imageNode, 0, 0);

$(canvas).detach();

// in the end i return this canvas in the callback so that any module that requested it can append it wherever and use it
callback(canvas);

问题是图像有时只在画布上渲染，而不是总是在画布上渲染。在我收到这个问题的前几天它就开始工作了

我在chrome调试器中尝试过，但当我在分离图像并在调试器中暂停图像的行上放置断点时，却发现了这一点

$(canvas).detach();

然后继续调试器它似乎总是工作 但如果没有调试器，它只能随机工作

我认为这可能是一个时间问题，所以我尝试在分离画布后执行超时，然后执行回调

   $(canvas).detach();
     setTimeout(function () {
        callback(canvas);
     }, 200);

---

但它仍然是随机渲染的，不是每次都是

我尝试创建小提琴，但您没有提供足够的代码来构建小提琴。我的第一个猜测是，在尝试附加之前，您应该检查以确保图像已加载。使用.onload methodWow！！这是正确的目标@zfrisch。我将所有代码移到imageNode.onload方法中，它就像一个符咒。我是一个堆栈溢出的初学者，我不知道我怎么能对你的评论投赞成票。非常感谢！！