const getBase64Image = async (src) => {
  return new Promise((resolve) => {
    const image = new Image();
    image.src = src;
    image.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0, image.width, image.height);
      const dataURL = canvas.toDataURL("image/png");
      console.log('---getBase64Image', dataURL);
      resolve(dataURL);
    };
  });
};

上面這種方式在本地服務測試完全沒有問題，但是部署到線上后，報錯

error

解決方案1

const getBase64Image = async (src) => {
  return new Promise((resolve) => {
    const image = new Image();
    image.src = src;
    img.setAttribute('crossOrigin', 'anonymous');
    image.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0, image.width, image.height);
      const dataURL = canvas.toDataURL("image/png");
      console.log('---getBase64Image', dataURL);
      resolve(dataURL);
    };
  });
};

解決方案2

const shareImageRef = ref.current;

    html2canvas(shareImageRef, {
      scale: Math.min(window.devicePixelRatio, 2),
      useCORS: true,
      allowTaint: true,
      scrollX: 0,
      scrollY: 0,
      backgroundColor: null
    }).then(res => {
      const savedUrl = res.toDataURL('image/png', 1);
      setBase64Image(savedUrl);
    });


<img ref={ref} className={styles.hiddenImage} src={shareImage} alt='' />