React-leaflet ImageOverlay is not visible in exported PDF using jspdf

Question

I'm using react-leaflet v4.2.1. I'm using it to display not a map but custom image like that

<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>

It's working fine. I want to export this map to pdf. I'm using jspdf library.

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');

The problem is that it only shows HeatmapLayer and ZoomControl and ImageOverlay is invisible.

I have also tried to use use-react-screenshot library and it also shows only HeatmapLayer and ZoomControl.

I have to export this ImageOverlay together with HeatmapLayer exactly as user sees it on the screen (so including zoom position etc) so I need to use leaflet. Do you have any ideas how can I do it?

Answer 1

I found a solution to my problem. I passed base64 instead of url as url prop to ImageOverlay component.

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

I think it might be related to CORS.