Ошибка перекрестного происхождения при использовании getImageData

Следующий код вызывает ошибку CORS:

const img = document.createElement('img');
img.src = url;

img.onload = () => {
  if (img.width > img.height) {
    img.height = 224;
  } else {
    img.width = 224;
  }

  document.body.appendChild(img);

  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  canvas.width = img.width;
  canvas.height = img.height;
  context.drawImage(img, 0, 0 );
  img.crossOrigin = 'Anonymous';
  img.setAttribute('crossOrigin', '');
  const imgData = context.getImageData(0, 0, img.width, img.height);
};

core.js:1673 ERROR DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. at HTMLImageElement.img.onload [as __zone_symbol__ON_PROPERTYload]

Он не работает в части getImageData, но создание img и добавление его к телу работает нормально.

В моем коде есть ошибка? Я не понимаю, почему я могу отображать изображение, но когда я хочу получить ImageData, я получаю сообщение об ошибке.

Есть идеи или объяснения?