fix: use frames for video capture & add iframes

DustinBrett commented 1 year ago

This pull request addresses the issue with capturing videos and iframes in the library, where the resulting images were blank or incorrect.

Description

To fix this issue, I have updated the cloneVideoElement and cloneIframeElement functions to use the contentDocument.body and canvas APIs to capture frames from the videos and iframes, and convert them to data URLs.

For videos, I have added a canvas element to the page, set its size to the same size as the video, and used the drawImage method to draw the video to the canvas. I have then used the canvas.toDataURL method to convert the canvas image to a data URL.

For iframes, I have used the contentDocument property of the HTMLIFrameElement to access the document object of the iframe, and then used the querySelector method to find the video element of the iframe. I have then used the same approach as before to capture a frame from the video and convert it to a data URL.

I have also added error handling to the functions to catch any errors that may be thrown by these APIs, and added tests to verify that the fixes work as expected.

Please review and let me know if there are any changes needed. Thank you!

ChatGPT helped me

Motivation and Context

This is related to these issues

Video capture https://github.com/bubkoo/html-to-image/issues/312 https://github.com/bubkoo/html-to-image/issues/202 https://github.com/bubkoo/html-to-image/issues/193

iFrame capture https://github.com/bubkoo/html-to-image/issues/192 https://github.com/bubkoo/html-to-image/issues/167 https://github.com/bubkoo/html-to-image/issues/36

Types of changes

[x] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)
[x] Enhancement (changes that improvement of current feature or performance)
[ ] Refactoring (changes that neither fixes a bug nor adds a feature)
[ ] Test Case (changes that add missing tests or correct existing tests)
[ ] Code style optimization (changes that do not affect the meaning of the code)
[ ] Docs (changes that only update documentation)
[ ] Chore (changes that don't modify src or test files)

Self Check before Merge

[x] My code follows the code style of this project.
[ ] My change requires a change to the documentation.
[ ] I have updated the documentation accordingly.
[x] I have read the CONTRIBUTING document.
[ ] I have added tests to cover my changes.
[ ] All new and existing tests passed.

vivcat[bot] commented 1 year ago

👋 @DustinBrett

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

fix: don't overwrite prevent_default if default wasn't prevented
feat: add graph.scale() method
docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

Follow the TypeScript coding style.
Run npm run lint locally to catch formatting errors earlier.
Document any user-facing changes you've made.
Include tests when adding/changing behavior.
Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

vivcat[bot] commented 1 year ago

👋 @DustinBrett Congrats on merging your first pull request! 🎉🎉🎉

vivcat[bot] commented 1 year ago

:tada: This PR is included in version 1.11.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

haodaking commented 1 year ago

iframe css not working

DustinBrett commented 1 year ago

iframe css not working

Yes it does have some limitations currently I'd noticed. Same with images. I think it needs it's base url to be from the iframe. If you have a suggestion where to tweak it please PR.

haodaking commented 1 year ago

351

This is my first pr submission, my english is not very good, sorry

iframe css not working

Yes it does have some limitations currently I'd noticed. Same with images. I think it needs it's base url to be from the iframe. If you have a suggestion where to tweak it please PR.

DustinBrett commented 1 year ago

351 This is my first pr submission, my english is not very good, sorry

iframe css not working

Yes it does have some limitations currently I'd noticed. Same with images. I think it needs it's base url to be from the iframe. If you have a suggestion where to tweak it please PR.

I see the problem now from your solution. I have a fix in general I'm also interested in possibly PR'ing. I think instanceof is not a reliable way to check if it's a type of element. I wrote a recursive function that can compare the prototype properly and seems to be working. But I need to do more testing.

bubkoo / html-to-image