Question

我想从base64的faviconkit.com获取图像。由于Cors，Fetch和XHR无法正常工作。唯一可行的方法是ctx.drawImage。任何其他基于JS的方法也可以提供帮助。谢谢

这是我到目前为止所拥有的：

const img = new Image();
const canvas = document.getElementById('canvas');
const base64 = document.getElementById('base64');
const ctx = canvas.getContext('2d');
const dataURL = canvas.toDataURL();

img.onload = () => {
  ctx.imageSmoothingEnabled = false;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0, 32,32);
};


img.src = "https://api.faviconkit.com/google.com/32";

base64.style.backgroundImage = "url('" + dataURL + "')";

#base64 {
  width: 32px;
  height: 32px;
  background-color: red;
}

<canvas id="canvas" width="32" height="32"></canvas>

<div id="base64"></div>

https://jsfiddle.net/on8krzub/

Answer 1

首先，您需要在加载图像后调用canvas.toDataURL()。其次，如果没有Access-Control-Allow-Origin: *，您将无法将远程图像转换为数据URI。

因此，您有一些解决问题的方法：

通过本地Web代理或添加了CORS的远程Web代理加载图像标头。
联系FaviconKit所有者并建议他添加CORS 标头。
使用另一个支持任何来源请求的API。例如：https://favicon.yandex.net/favicon/google.com?size=32

但是，即使远程映像返回了Access-Control-Allow-Origin: *标头，也不能调用canvas.toDataURL()，除非您指定img.crossOrigin = 'Anonymous'。

顺便说一句，我不知道这对您是否重要，但是您必须记住canvas.toDataURL()不会返回原始的Base64字符串。无论如何，对于其他一些想法和示例，请check this page。

通过ctx.drawImage获取图像并转换为base64

1 个答案: