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

确定何时加载画布内容

1 个答案: