确定何时加载画布内容

Is there a way to detect when canvas content is loaded? What I'm trying is following. I need to print a page where in a widget is rendered a pdf document using the pdfjs library. Only the first pdf page have to be printed alongside with the content of the web page where the widget is placed. My approach was to get the canvas of the first pdf page which the pdfjs library created and put its content as source of an img element.

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

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

Now if I use this as is, the image is created but is blank. If I put the code above inside setTimeout with a few seconds delay the image is rendered properly with the content of the first pdf page but this is not reliable for me. I've checked the content returned by canvas.toDataURL() in both cases and it appeared not equal so this was the reason for my conclusion that the content of the canvas was not loaded yet. Any ideas for solution would be appreciated.

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

1 个解决方案

#1

canvas will bind to the DOM like any other html tag. But your problem is image is not loading at very first time. So use onload method for loading images.

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

Refer HTML5 Canvas Load Image Data URL

请参阅HTML5 Canvas加载图像数据URL

EDIT : drawImage() method draws an image or video onto the canvas. So use that method to draw the image on canvas.

编辑:drawImage()方法将图像或视频绘制到画布上。因此,使用该方法在画布上绘制图像。

Here is the updated code:

这是更新的代码:

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;

For more information see here

有关更多信息,请参见此处

#1