确定何时加载画布内容

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; 

对于那些没有这种'getContentURL（）`方法来自更多信息see here