Search code examples
javascriptblazorscreenshot

Export High Resolution Browser Screenshot


For a Blazor WASM project I have been working on, I used this great open-source projects called Blazor Diagrams. The client wants me to export a screenshot of the diagram, but with the catch that is that the screenshot should be at the full resolution of the graph which will almost always be higher resolution than the browser window. For example, imagine the div containing the diagram is 900px wide to fit in the browser, but the entire diagram width is 2500px. I would like to capture an image that is 2500px wide.

I have looked into various options like

  • html2canvas
  • getDisplayMedia

Html2canvas does not play nicely with Blazor and if I understand it right getDisplayMedia would be a pixel for pixel capture.

I don't think we would be able to use 3rd party API's due to confidentiality, so I am wondering what my options would be.


Solution

  • Most if not all of the javascript screen to image, Dom to image library's lack full svg support and has some quirks with in line css etc. Best is to get creative with either playwright or bunit to grab the output html in a staged environment for best results. Currently we had all the issues mentioned but have resolved it in other ways with no/minimal javascript dependencies.

    Using Blazor serverside, webassembly might be a different case