NextJS 中的 Html-to-image 无法正常工作，下载了相同的参考

Question

我在 Next.js 项目中的

html-to-image

库方面遇到了一些问题。 这是我用

html-to-image

转换图像的代码

import Image from "next/image";
import {toPng} from 'html-to-image'

const divReferenceA = useRef(null);
const divReferenceB = useRef(null);
const [type, setType] = useState(true)

const convertDivToPng = async div => {
    const data = await toPng(div, {
      cacheBust: true,
      canvasWidth: 842,
      canvasHeight: 595,
    });
    return data;
  };

const handleDownloadA = async e => {
    try {
      const data = await convertDivToPng(divReferenceA.current);
      if (data) {
        const link = document.createElement("a");
        link.href = data;
        link.download = "Image A.png";
        link.click();
      }
    } catch (e) {
      console.log(e, "ini error sertifikat");
    }
  };

const handleDownloadB = async e => {
    try {
      const data = await convertDivToPng(divReferenceB.current);
      if (data) {
        const link = document.createElement("a");
        link.href = data;
        link.download = "Image B.png";
        link.click();
      }
    } catch (e) {
      console.log(e, "ini errornya");
    }
  };

return (
    <div ref={divReferenceA}> {... content with <Image /> from next-image }</div>
    <button onClick={e => handleDownloadA(e)}>
        Download
    </button>
    {type == true ? (
        <div className="position-relative p-0 d-flex" ref={divReferenceB}> 
            {... content with <Image /> from next-image but different image from refA }</div>
        <button onClick={e => handleDownloadB(e)}>
            Download
        </button>
    ) : <div> </div>

我的问题是，当我加载页面并单击

divRefferenceA

的下载按钮时，我将成功转换并下载整个 div。然而，当我点击

divRefferenceB

的下载按钮后，我会再次下载

divRefferenceA

的div。但是当我

console.log(divRefferenceB.current)

时，它会按预期显示

divRefferenceB

。

所以我再次重新加载页面，我按下

divRefferenceB

下载按钮，我将成功转换并下载

divRefferenceB

的整个div，但是在我按下

divRefferenceA

的下载按钮后，我将下载

divRefferenceB

。所以我猜测每次我第一次下载某些东西时，除非我重新加载页面，否则

dataURL

会一直存在。不知道发生了什么。

但是，我尝试了一些东西。我在页面中创建了另一个 div：

const testRef = useRef(null)

const handleDownloadTest = async e => {
    try {
      const data = await convertDivToPng(testRef.current);
      if (data) {
        const link = document.createElement("a");
        link.href = data;
        link.download = "Image B.png";
        link.click();
      }
    } catch (e) {
      console.log(e, "ini errornya");
    }
};

<div ref={testRef}>
   <div>a</div>
   <div>a</div>
   <div>a</div>
</div>

当我下载此 div 并按预期工作时，问题不会发生。我很困惑。 nextImage有什么问题吗？我不确定发生了什么事。已经尝试了两天，但无法解决问题。

====================问题已解决！====================

事实证明，我遇到了一些 Cors 问题，这些问题没有在我不知道的后端环境中设置。 我发现这个错误的原因是我尝试使用直接获取图像

const data = await axios.get('s3-bucket-api')
if(data){
  console.log(data)
}

然后我收到了有关 cors 相关问题的错误响应。 后来我们尝试调整后端环境，问题就解决了

Answer 1

请检查

  const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Answer 2

您能分享一下html-to-image的完整代码吗？

你是如何解决cors问题的？