确定何时加载画布内容

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

画布将像任何其他html标记一样绑定到DOM。但您的问题是图像不是第一次加载的。因此，请使用onload方法加载图像。

参考HTML5画布加载图像数据URL

方法将图像或视频绘制到画布上。因此，请使用该方法在画布上绘制图像。

以下是更新的代码：

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;

有关更多信息，请参阅此处