How convert loaded Image in browser to base64 string?

Question

I loaded a url in qml WebView , In this page there is an image and is displaying with WebView but when I get the source of the page with `document.documentElement.innerHTML',I see the image tag like this:

<td class="labelColumn">
<img class="g-Image" title="Captha Image" src="https://website.com/user-account/gwt/entrypoint/registeruser.captcha" style="height: 35px; width: 130px;">
</td>

But the WebView is displaying this image and I my question is that I should be able to get the image in base64 string or the path of it. How can I find the image?

When I run document.images[0].src I will get https://website.com/user-account/gwt/entrypoint/registeruser.captcha .

I want the content of the image ,It may be base64 string or the path or... .

Answer 1

Use the HTMl5 <canvas> element.

Load the image inside of the canvas and then use the toDataURL() method/function. That should give you the base64 output.