javascript - 如何通过 DOM 中的 img 标签获取 base64 代码？

Question

我有一个图像链接 (./kcaptcha/)，它会在每个查询中为我提供带有数字的随机图像。所以，我想从 DOM 中获取 base64 代码，而不是从图像 src/url 中获取。有没有办法实现它？图片在这里

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