Получить изображение через ctx.drawImage и конвертировать в base64 - PullRequest
Новая
       7

Получить изображение через ctx.drawImage и конвертировать в base64

0 голосов
/ 28 ноября 2018

Я хотел бы получить изображение с faviconkit.com в base64.Fetch & XHR не работает из-за Cors.Единственная мысль, которая работает, это 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/

1 Ответ

0 голосов
/ 29 ноября 2018

Сначала нужно позвонить canvas.toDataURL() после загрузки изображения.Во-вторых, без Access-Control-Allow-Origin: * вы не сможете конвертировать удаленное изображение в URI данных.

Таким образом, у вас есть несколько способов решения вашей проблемы:

  • Загрузка изображений черезлокальный веб-прокси или удаленный, который добавляет заголовки CORS.
  • Свяжитесь с владельцем FaviconKit и предложите ему добавить заголовки CORS.
  • Используйте другой API, который поддерживает запросы из любого источника.Например: https://favicon.yandex.net/favicon/google.com?size=32

Однако, даже если удаленное изображение возвращает заголовок Access-Control-Allow-Origin: *, вы не можете вызвать canvas.toDataURL(), если не укажете img.crossOrigin = 'Anonymous'.

.Кстати, я не знаю, имеет ли это для вас значение, но вы должны помнить, что canvas.toDataURL() не возвращает исходную строку Base64.В любом случае, для некоторых дополнительных мыслей и примеров, проверьте эту страницу .

...