渲染html后截图，html中的小图标无法生成 #178
Comments
|
那应该是图标还没加载出来 |
那该怎么操作一下，我sleep 2 秒也不行 |
Browser browser = Puppeteer.launch(launchOptions);
//打开一个页面
Page page = browser.newPage();
page.on(PageEvents.Console, (Consumer<ConsoleMessage>) message -> System.out.println("console: "+message.text()));
WaitForOptions waitForOptions = new WaitForOptions();
waitForOptions.setWaitUntil(Collections.singletonList(PuppeteerLifeCycle.networkIdle));
page.setContent(" <!DOCTYPE html>\n" +
"<html lang=\"en\">\n" +
"<head>\n" +
" <meta charset=\"UTF-8\">\n" +
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n" +
" <title>Icon Home Example</title>\n" +
"</head>\n" +
"<body>\n" +
" <h1>Home Icon Example</h1>\n" +
" <img id=\"icon-home\" src='https://cdn-icons-png.flaticon.com/512/3222/3222434.png'></img>\n" +
"</body>\n" +
"</html>", waitForOptions);
WaitForSelectorOptions options = new WaitForSelectorOptions();
options.setVisible(true);
ElementHandle elementHandle = page.waitForSelector("#icon-home",options);
while (true){
Object complete = elementHandle.evaluate("(element) => {\n" +
" return element.complete\n" +
"}");
if((boolean)complete){
break;
}
}
ElementScreenshotOptions screenshotOptions = new ElementScreenshotOptions();
screenshotOptions.setFromSurface(true);
screenshotOptions.setPath("图片.png");
screenshotOptions.setFullPage(true);
page.screenshot(screenshotOptions);
browser.close();尝试一下这个方法 |
//等待图片加载完毕
@Test
public void test10() throws Exception {
launchOptions.setDevtools(true);
Browser browser = Puppeteer.launch(launchOptions);
//打开一个页面
Page page = browser.newPage();
page.on(PageEvents.Console, (Consumer<ConsoleMessage>) message -> System.out.println("console: " + message.text()));
page.setContent(" <!DOCTYPE html>\n" +
"<html lang=\"en\">\n" +
"<head>\n" +
" <meta charset=\"UTF-8\">\n" +
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n" +
" <title>Icon Home Example</title>\n" +
"</head>\n" +
"<body>\n" +
" <h1>Home Icon Example</h1>\n" +
" <img id=\"icon-home\" src='https://cdn-icons-png.flaticon.com/512/3222/3222434.png'></img>\n" +
"</body>\n" +
"</html>");
WaitForSelectorOptions options = new WaitForSelectorOptions();
options.setVisible(true);
ElementHandle elementHandle = page.waitForSelector("#icon-home", options);
JSHandle jsHandle = page.waitForFunction("(element) => {\n" +
" return element.complete;\n" +
"}", elementHandle);
System.out.println("图片加载完毕" + jsHandle);
ElementScreenshotOptions screenshotOptions = new ElementScreenshotOptions();
screenshotOptions.setFromSurface(true);
screenshotOptions.setPath("图片.png");
screenshotOptions.setFullPage(true);
page.screenshot(screenshotOptions);
browser.close();
} |
|
好的，我先试一下是不是因为网络延迟的原因吧。 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
例如：
.icon-home {
background-image: url('https://cdn-icons-png.flaticon.com/512/3222/3222434.png');
}
在本地浏览器打开html可以展示该图标，但是在linux服务器上渲染，图标是缺失的，这个是怎么回事？
The text was updated successfully, but these errors were encountered: