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... .

Does this answer your question? [How can I convert an image into Base64 string using JavaScript?](https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript) — Syed Mohammad Sannan, Jun 26 '21 at 13:47

score 1 · Accepted Answer · answered Jun 26 '21 at 13:45

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.

answered Jun 26 '21 at 13:45

Syed Mohammad Sannan

336
6
16

How convert loaded Image in browser to base64 string?

1 Answers1