How to get base64 code by an img tag from DOM?

Question

I have an image link (./kcaptcha/) that gives me random image with numbers on each query. So, I want to get base64 code from DOM, not from image src/url. Is there any options to achieve it? image here

Answer 1

Let's say you work with a tag that looks like this:

 const myBtn = document.getElementById("myBtn"); myBtn.addEventListener('click', () => { const c = document.createElement('canvas'); const ctx = c.getContext("2d"); const img = document.getElementById("myImg"); ctx.drawImage(img, 0, 0); alert(c.toDataURL("image/png")); })

 <img id="myImg" src="https://picsum.photos/200" crossorigin="Anonymous"/> <br> <button id="myBtn">Get B64</button>

crossorigin="Anonymous" is mandatory