html2canvas等待图像加载 [英] html2canvas wait for images to load
问题描述
一段时间以来我一直遇到这个问题,我似乎找不到解决办法.
I'm having this problem for some time ow and I can't seem to find a solution.
我正在使用最新的html2canvas js插件来拍摄用flotcharts绘制的图表的屏幕截图,然后通过隐藏的输入提交base64屏幕截图.问题是图表的div也有一些图像,并且html2canvas在加载图像之前返回了base64字符串.我可以将setTimeout放在提交上,直到它们加载完毕,但显然chrome打开我提交的页面作为弹出窗口(这真的不行,因为我们的客户不知道如何允许弹出窗口). 所以这就是我尝试过的,但是图像没有预加载(由于html2canvas的异步特性)
I'm using the latest html2canvas js plugin to take a screenshot of chart made with flotcharts and then submit the base64 screenshot via a hidden input. The problem is the div with the chart also has some images and html2canvas return a base64 string before the images are loaded. I can put a setTimeout on the submit untill they are loaded but apparently chrome opens the page where I submitted as a popup (which is really not ok cause our clients don't know how allow popups). So this is what I tried but the images are not preloaded (because of the async nature of html2canvas)
function getPNGBase64forHtml($container) {
var imageString;
html2canvas($container, {
useCORS: true,
onrendered: function(canvas) {
imageString = canvas.toDataURL('image/png');
}
});
return imageString;
}
这也可以(虽然可以,但是不能及时加载图像):
And also this (this works ok but it doesn't load the images in time):
function getPNGBase64forHtml($container) {
var h2canvas = html2canvas($container);
var queue = h2canvas.parse();
var canvas = h2canvas.render(queue);
return canvas.toDataURL('image/png');
}
所以问题出在等待图像加载到html2canvas中,然后执行其余的东西. 如果有人可以帮助,将不胜感激,我向您致敬的先生和女士们! :)
So the problem is with waiting till the images are loaded in html2canvas then exeuting the rest of my stuff. If anyone can please help, that would be very much appreciated, I bow to you kind sirs and madams! :)
修改:
这是我捕获的部分的html,所有这些都在打印容器div多数民众赞成中.无法捕获时间轴中的箭头(仅显示一个箭头),因为它是图像,其他所有操作都可以:
Here is the html of the part that I capture, this all is in a print-container div thats all. The arrow (only one is showed) in the timeline-prognose doesn't get captured cause it's a image, everything else does:
<div id="timeline-outer-container">
<div id="timeline-container" class="flot-container">
<div id="timeline-chart" class="flot-chart">
<canvas class="flot-base" width="888" height="335" ></canvas>
<div class="flot-text" >
<div class="flot-x-axis flot-x1-axis xAxis x1Axis">
<div class="flot-tick-label tickLabel" >Q1</div>
<div class="flot-tick-label tickLabel">Q2</div>
...
</div>
<div class="flot-y-axis flot-y1-axis yAxis y1Axis">
<div class="flot-tick-label tickLabel">75</div>
<div class="flot-tick-label tickLabel">100</div>
...
</div>
</div>
<canvas class="flot-overlay" width="888" height="335"></canvas>
<div class="axis-label xaxis">Zeitraum</div>
<div class="axis-label yaxis rotate-90">Anzahl</div>
<div id="zoom-out-button" class="timeline-zoom-button"><i class="fa fa-zoom-out"></i></div>
<div id="zoom-in-button" class="timeline-zoom-button"><i class="fa fa-zoom-in"></i></div>
<div id="zoom-default-button" class="timeline-zoom-button"><i class="fa fa-repeat"></i></div>
</div>
</div>
</div>
<div id="timeline-prognose">
<img id="timeline-arrow-up" class="timeline-arrows" src="/portal//images/arrows/up.png" alt="">
<img id="timeline-arrow-down" class="timeline-arrows" src="/portal//images/arrows/down.png" alt="">
</div>
推荐答案
因此,由于您使用的是远程图像,因此可以使用以下修复程序在脚本中进行一些修改:
So since you're using remotes images you can use the following fix doing some modifications in your script:
function getPNGBase64forHtml() {
var imageString;
html2canvas(document.body, {
useCORS: true,
logging : true, //Enable log (use Web Console for get Errors and Warnings)
proxy :"html2canvasproxy.php",
onrendered: function(canvas) {
var img = new Image();
img.onload = function() {
img.onload = null;
document.body.appendChild(img);
};
img.onerror = function() {
img.onerror = null;
if(window.console.log) {
window.console.log("Not loaded image from canvas.toDataURL");
} else {
alert("Not loaded image from canvas.toDataURL");
}
};
imageString = canvas.toDataURL('image/png');
}
});
return imageString;
}
如果您使用的是php,则代理设置必须使用以下脚本: html2canvas-php-proxy
If you are using php then the proxy setting must use the following script: html2canvas-php-proxy
否则,在.NET项目中,您可以使用以下脚本资源:
Otherwise with .NET projects you can use these script resources:
带有asp-classic的html2canvas代理-vb 带有asp.net的html2canvas代理-csharp
如果您决定使用本地图像,则不会出现此错误.
If you decided to use local images this bug will not appear.
希望它对您有用,这是此html2canvas错误的原始线程 https://github .com/niklasvh/html2canvas/issues/145
Hope it works for you, here is the original thread for this html2canvas bug https://github.com/niklasvh/html2canvas/issues/145
这篇关于html2canvas等待图像加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!