Exporting Diagram as image with HTML nodes
Hi
I used this article as a base to create my sample:
How To export base64 Image with diagram size using blink rendering in Vue Diagram using MVC?
In my client side I create the model:
const htmlData = this.diagramInstance.getDiagramContent([fullUrl]);
const diagramDiv = document.getElementById("diagram_diagramLayer");
const contentWidth = diagramDiv.getBoundingClientRect().width;
const contentHeight = diagramDiv.getBoundingClientRect().height;
const model = new DesignerImageModel({
versionId: this.currentProcessTemplateVersionId,
designerImageData: htmlData as string,
width: contentWidth,
height: contentHeight,
css: designerCssContent,
});
await Api.workboard.saveDesignerImage(model);
At API I store it as base64:
HtmlToPdfConverter converter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink);
BlinkConverterSettings blinkConverterSettings = new BlinkConverterSettings();
blinkConverterSettings.ViewPortSize = new Syncfusion.Drawing.Size((int)Math.Round(model.Width), (int)Math.Round(model.Height));
blinkConverterSettings.Css = model.Css;
converter.ConverterSettings = blinkConverterSettings;
Syncfusion.Drawing.Image doc = converter.ConvertToImage(model.DesignerImageData, "");
MemoryStream stream = new MemoryStream();
byte[] imageByte = doc.ImageData;
processTemplateVesion.DiagramImage = imageByte;
return await UpdateInternalAsync(processTemplateVesion, messageList, userId);
My diagram looks like:
But after saving image the result is:
My nodes html content is:
<div class="designer-node shadow-node" style="background:white; cursor: pointer;">
<div class="panel">
<div class="row">
<div class="col-auto" style="background:${color}; color:white;">
<i class="${icon} fa-fw"></i>
</div>
<div class="col" style="background:#f2f4f8;">
<div class="text-center">
<span>${annotation}</span>
</div>
</div>
</div>
</div>
</div>`;
As you can see, the first round node looks ok, but the rest have broken the styling, even if I pass the appropriate Css in my model, and apply it to blinkConverterSettings, I also tried to include link to scss file on this.diagramInstance.getDiagramContent, but the result is the same
SIGN IN To post a reply.
3 Replies
SIGN IN To post a reply.
