I have an Electron WebView. I want to take a screenshot of its content and display it somewhere in my application.
I have tried using the webview.capturePage method, which returns a Native Image.
How can I add that image to the DOM and thus display it on my app? I'm unsure how to convert it.
You can use image.toDataURL for this purpose (as @Mikaeru suggested) An example could be
<html>
<body>
<webview id="view" src="https://www.github.com/" style="width:320px; height:240px">
</webview>
<button id="capture">Capture</button>
<img id="show" src="" />
<script>
const wv = document.getElementById('view')
const b = document.getElementById('capture')
const i = document.getElementById('show')
b.addEventListener('click', () => {
wv.capturePage((img) => {
i.src = img.toDataURL()
})
})
</script>
</body>
</html>