[Question] How to save editor in png (or something else)

[cage81]

How can we save the whole editor in a png or something like? Thank you so much @jerosoler

[jerosoler]

Hi @cage81

As it is html and not canvas. You can use these libraries. https://github.com/bubkoo/html-to-image https://github.com/puppeteer/puppeteer

See more options: https://stackoverflow.com/questions/10721884/render-html-to-an-image

Jero

[jerosoler]

@cage Has the solution served you?

You have achieved it with some code, you can show it to serve other users.

[cage81]

@cage Has the solution served you?

You have achieved it with some code, you can show it to serve other users.

Hi @jerosoler, I didn't have time to dedicate to it...as soon as i will do it, surely I'll be happy to share the solution with others.

[jerosoler]

Test with dom-to-image https://github.com/tsayen/dom-to-image

    <script src="https://cdn.jsdelivr.net/gh/tsayen/dom-to-image/dist/dom-to-image.min.js"></script>

    var node = document.getElementById('drawflow');

    domtoimage.toPng(node)
        .then(function (dataUrl) {
            var img = new Image();
            img.src = dataUrl;
            document.body.appendChild(img);
        })
        .catch(function (error) {
            console.error('oops, something went wrong!', error);
        });

Example image: Left Drawflow / Right Image generate

[pkasson]

So ... someone forked the fork that tsayen forked and fixed at least this bug - here is the repo:

https://github.com/1904labs/dom-to-image-more

The only thing is that the node connectors all 'float to the top' ... and I am using defaults, so maybe this can be fixed, BUT ... it worked. Thanks all (@jerosoler and others) who guided me to this solution !

[ahmadshaik1608]

Hi @jerosoler ,I tried this it is working if the chart is in positive coordinate (top > 0px and left > 0px) and if the any node with top and left with negative values then they got cut from the image.

Can you please help me in capturing the full graph with out cutting like this

In this image the left side nodes got cut while displaying in drawflow canvas as they are placed in left negative values, now they are getting cut from the screenshot.

Please help me on this.

[AKRASH-Nadeem]

Is there a way to save image of the design which should include all the flow including the elements outside of the view.

I used dom-to-image but it was throwing some error with SVG so i used another js library html2canvas.

html2canvas is working but it is breaking the design and also it can't get image of whole design.it is only taking image of the design in view.

here is the actual design

and here is the image i got using html2canvas:

You can see the text boxes are not properly showing and also there is a grey color of padding or margin in boxes

And if i use a design which have a element out of the view it does not take image of that element.

here is the Custom css:

  .headings{
      margin: 10px;
      cursor: initial;
      user-select: initial;
  }
  .search_div{
      /* background-color: red; */
      justify-self: center;
      padding-top: 15px;
  }
  .search_div input,.inputfield{
      border: 2px solid #afa6a6;
      border-radius: 15px;
      padding: 8px;
      box-sizing: border-box;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      outline: none;
  }
  .inputfield{
    border-radius: none;
  }
  .search_div input:focus,.inputfield:focus{
      border-color: #4EA9FF;
  }
  .header-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .add-input,
  .add-output,
  .btn-import,
  .btn-save-image,
  .remove-input,
  .remove-output{
    margin: 10px;
    margin-top: 25px;
    padding: 10px;
    cursor: pointer;
    margin-left: 50px;
    background-color: #28A745;
    color: white;
    font-size: 15px;
    border: none;
    border-radius: 5px;
  }
  .add-output,.btn-import,.btn-save-image{
    margin-left: 5px;
    background-color: #007BFF;
    color: white;
  }
  .remove-input,
  .remove-output{
    margin-left: 5px;
    color: white;
    background-color: #DC3545;
  }
  .drag-drawflow{
    display: flex;
    align-items: center;

  }
  .drag-drawflow span{
    margin-left: 10px;
  }
  .drag-drawflow svg,.drag-drawflow i{
    font-size: 30px;
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stack textarea and button vertically */
  }
  .importcodebox{
    width: 300px;
    height: 150px;
    margin-bottom: 10px;
  }

[jerosoler]

View

• 747