Getting CORS on image from CMS

Design help CMS
3

So I have wrote code to get average color to avoid external libraries but still getting CORS and only way to make it work is refreshing browser. as on normal gem change sill getting CORS. Can Someone can help to improve this code to avoid this odd behaviour?

document.addEventListener("DOMContentLoaded", () => {
const img = document.getElementById('gem-main-img');
const rect = document.querySelector("#gem-bg-stripe");

img.onload = function () {
    getAverageColor(img)
}
img.crossOrigin = "anonymous"

function getAverageColor(img) {

  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  let width = canvas.width || img.naturalWidth;
  let height = canvas.height || img.naturalHeight;
  let draw = ctx.drawImage(img, 0, 0);

  const imageData = ctx.getImageData(0, 0, width, height);
  const data = imageData.data;
  let r = 0;
  let g = 0;
  let b = 0;

  for (let i = 0, l = data.length; i < l; i += 4) {
    r += data[i];
    g += data[i+1];
    b += data[i+2];
  }
  
  r = Math.floor(r / (data.length / 4));
  g = Math.floor(g / (data.length / 4));
  b = Math.floor(b / (data.length / 4));
  console.log("R:",r,"G:",g,"B:",b)
  //return { r: r, g: g, b: b };
 rect.style.background = `rgb(${r},${g},${b})`;
}

getAverageColor(img)

})

Thanks