Comments (7)
If itβs lazy loaded, how will capture-website even know about it?
from capture-website.
Well, I'm not familiar with Puppeteer and if the scenario I have in my head is possible or not but for me it looks like this:
- capture-website opens website
- Waits until all resources are loaded
- Scrolls it to the bottom to trigger all lazy loading elements
- Waits until they are loaded
- Makes a screenshot of the page
It should work like that if fullPage
is set to `true. If it's not, then steps 3 and 4 should be skipped.
By the way, I'm willing to help, especially with issue #1, but as I already said, I'm not really familiar with Puppeteer or how capture-website works. If there is something that can help me to roll into the project easier, I would be thankful for sharing.
from capture-website.
What you're describing is ideally how the fullPage
option should work by default.
from capture-website.
@issuehunt has funded $60.00 to this issue.
- Submit pull request via IssueHunt to receive this reward.
- Want to contribute? Chip in to this issue via IssueHunt.
- Checkout the IssueHunt Issue Explorer to see more funded issues.
- Need help from developers? Add your repository on IssueHunt to raise funds.
from capture-website.
I can handle this easily. Do you still need help? Let me know, thanks.
from capture-website.
Got any examples of websites this should work with? What if the website features endless scrolling?
EDIT: Nvm... Here are some clues https://github.com/sindresorhus/capture-website/issues1.
For FIXED elements,
a) Open the page in a particular viewport width(W) and height(H) and then capture the screenshot of the viewport only.
b) Scroll the page horizontally(W+W) and take the screenshots until fully scrolled horizontally.
c) Now scroll vertically(H+H) and take the screenshot.
d) Repeat steps (b) and (c)
e) Now smartly stitch the images in such a way it looks like a full-page screenshot.
f) For tackling FIXED elements, after taking the very first screenshot, remove them from page otherwise they will repeat in every screenshot and will cause noise.
- For INFINITE scroll
a) Scroll the page to the bottom
b) Check if height is increased because of lazy-included elements at the bottom
c) Repeat (a) and (b) until height is not increasing or the MAX_SCREENSHOT_HEIGHT is reached.
d) Now apply the same strategy as mentioned aboveHope this might help.
Let me know if I could help in this. It would be great to work with you someday.
Originally posted by @softvar in #1 (comment)
Maybe it should also be added as a new config property.
from capture-website.
@sindresorhus has rewarded $54.00 to @netrules. See it on IssueHunt
- π° Total deposit: $60.00
- π Repository reward(0%): $0.00
- π§ Service fee(10%): $6.00
from capture-website.
Related Issues (20)
- Capturing elements inside `#shadow-root` HOT 2
- Can it be changed using networkidle0 or open options HOT 1
- Error: Could not find expected browser (chrome) locally on version 1.4.0 CJS HOT 3
- Feature Request: use puppeteer-core when Chrome is available in system HOT 3
- Error: createRequire only supports 'file://' URLs for the 'filename' parameter. HOT 1
- Support PDF as output type HOT 4
- Feature: Option for allowing CORS
- TLS certificate HOT 1
- Consider replacing Puppeteer with Playwright HOT 2
- Could be useful to support a commonjs version HOT 2
- Consider add some code or event handler before goto page
- engine.bin size keeps on increasing untill no space left on device
- How to pass proxy configuration ? HOT 1
- Recommendation for multiple URL performance? HOT 1
- Class extends value undefined is not a constructor or null (NuxtJS) HOT 1
- [Feature Request] - Allow redirection of page console output to host console.log without forcing headless = false HOT 2
- Akamai error with TLS
- Video thumbnails not displaying
- Code opens a chrome browse when testing locally
- Reading from "node:fs" is not handled by plugins (Unhandled scheme) HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from capture-website.