format.toSVG(): paper background image does not appear in exported png/svg/jpeg file

[patilvishal755]

paper.toPNG(function (dataURI) {
      const link = document.createElement("a");
      link.href = dataURI;
      link.setAttribute("download", 'fileName.png');
      document.body.appendChild(link);
      link.click();
    });

The above code is use to export in PNG format, but the paper background image is not applied to the downloaded image

The background image is applied as flows

paper.drawBackground({
        image: 'image url',
        position: 'center',
        repeat: 'no-repeat',
        size: 'cover',
        opacity: 1
      });

Acutal Graph contained Downloaded Image

[kumilingus]

Hi, this is not currently supported. A workaround is to add the <image/> tag with the background image to the SVG before the export and remove the image after the export.

const imageVel = V('image').attr({
  'xlink:href': 'image.png',
  'width': 1000,
  'height': 1000
});
V(paper.getLayerNode('back')).append(imageVel);
paper.toPNG(function(dataURL) {
  imageVel.remove();
  /*...*/
});

[patilvishal755]

Hi @kumilingus, thanks for quick workaround, but the background image is not scaling as per the content on the graph/paper I am giving width and height based on graph.getBBox().inflate(10) also not working with paper.getContentBBox()
can you please let me know how to set the width and height of the background image(imageVel width and height ) based on content

Actual Graph contained

Downloaded image

thanks

[kumilingus]

It depends on the background configuration. In your case (cover, no-repeat, center) it should be like this:

const imageVel = V('image').attr({
  'xlink:href': 'image.png',
  'preserveAspectRatio': 'none',
  ...paper.getArea().toJSON()
});
V(paper.getLayerNode('back')).append(imageVel);

[patilvishal755]

thanks @kumilingus its working

[patilvishal755]

Hi again @kumilingus, The background image is not appearing in the downloaded file something on chrome browser, but for Firefox it is working as expected, also the same issue is seen on print i.e. paper.print() where sometime the background image does not appear on print preview. The code is same for print and download as mention in above comment

Thanks

[kumilingus]

Perhaps you have to wait until the new <image> is loaded.

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Please remove stale label or comment or this will be closed in 14 days.

[nisargrthakkar]

Did we get any update on same?

[kumilingus]

This one has not been implemented yet (it has a lower priority since workarounds exist).

What is your paper background configuration? We can suggest a workaround.