确定何时加载画布内容

Question

有没有办法检测画布内容何时加载？我正在尝试的是跟随。我需要打印一个页面，其中使用 pdfjs 库在小部件中呈现 pdf 文档。只有第一个 pdf 页面必须与放置小部件的网页内容一起打印。我的方法是获取 pdfjs 库创建的第一个 pdf 页面的画布，并将其内容作为 img 元素的来源。

var content = canvas.toDataURL(); 
var img = document.createElement('img'); 
img.setAttribute('src', content); 
widget.parentNode.insertBefore(img, widget);

现在，如果我按原样使用它，图像已创建但为空白。如果我将上面的代码延迟几秒钟放在 setTimeout 中，则图像会与第一个 pdf 页面的内容一起正确呈现，但这对我来说并不可靠。我已经检查了 canvas.toDataURL() 在这两种情况下返回的内容，它看起来不相等，所以这就是我得出画布内容尚未加载的结论的原因。 任何解决方案的想法将不胜感激。

Answer 1

canvas 将像任何其他 html 标记一样绑定到 DOM。 但是您的问题是图像不是在第一次加载。所以使用onload 方法来加载图像。

参考HTML5 Canvas Load Image Data URL

编辑： drawImage() 方法在画布上绘制图像或视频。 所以使用该方法在画布上绘制图像。

这是更新后的代码：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
        context.drawImage(this, 10, 10);   // here this = image, 10 = width of the image, 10 = height of the image
};

imageObj.src = dataURL;

欲了解更多信息see here