React-leaflet ImageOverlay 在使用 jspdf 导出的 PDF 中不可见

Question

我正在使用 react-leaflet v4.2.1。我用它来显示的不是地图而是这样的自定义图像

<MapContainer
  center={[height / 2, width / 2]}
  crs={crs}
  bounds={bounds}
  minZoom={-5}
  zoomControl={false}
  attributionControl={false}
>
  <HeatmapLayer /> // component created with leaflet.heat
  <ZoomControl position='bottomleft' />
  <ImageOverlay url={url} bounds={bounds} />
</MapContainer>

工作正常。我想将这张地图导出为 pdf 格式。我正在使用 jspdf 库。

const doc = new JsPDF();
const heatmap = document.getElementById('heatmap-report')!;
const data = await html2canvas(heatmap);
const img = data.toDataURL('image/png');
const imgProperties = doc.getImageProperties(img);
const pdfWidth = doc.internal.pageSize.getWidth();
const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width;
doc.addImage(img, 'PNG', 10, 150, pdfWidth - 10, pdfHeight);

doc.save('my-file.pdf');

问题是它只显示 HeatmapLayer 和 ZoomControl，而 ImageOverlay 不可见。

我还尝试使用 use-react-screenshot 库，它也只显示 HeatmapLayer 和 ZoomControl。

我必须将这个 ImageOverlay 与 HeatmapLayer 一起导出，就像用户在屏幕上看到的那样（因此包括缩放位置等），所以我需要使用传单。你有什么想法我该怎么做吗？

Answer 1

我找到了解决问题的方法。我将 base64 而不是 url 作为 url prop 传递给 ImageOverlay 组件。

  // before <ImageOverlay url={url} bounds={bounds} />
  // now <ImageOverlay url={base64} bounds={bounds} />

我认为这可能与CORS有关。