Open patilvishal755 opened 2 years ago
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();
/*...*/
});
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
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);
thanks @kumilingus its working
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
Perhaps you have to wait until the new <image>
is loaded.
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.
Did we get any update on same?
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.
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
Acutal Graph contained
Downloaded Image