0

My Snippet tool allows users to save/copy code snippets in order to share them. I use html2canvas in order to display the snippet that the user has created in the console and allow them to save it.

But I have found many problems in their display on browsers other than Firefox, as you can see here (it's blurry and the letter spacing is abnormal).

Here's how I save the snippet once the user presses "Save":

// Call html2canvas with the console element
html2canvas(document.getElementsByClassName('console'), {
  onrendered: function(canvas) {
    var url = canvas.toDataURL()

    // Set the element's URL in an img tag
    var img = '<img src="' + url + '" style="border:0;"></img>'

    // Open a window and display the image in it
    var x = window.open();
    x.document.open();
    x.document.write(img);
    x.document.close();
  }
});

My best solution at the moment is to have the snippet saved locally and directly to the user, how may I have a specific HTML element downloaded using Javascript?

EDIT:

This is the HTML element that I wish to save, it contains the console design and a codemirror component that represents the text editor in which users type:

<div class="console">
  <div class="console-header">
    <div class="console-buttons">
      <div class="console-button button-1"></div>
      <div class="console-button button-2"></div>
      <div class="console-button button-3"></div>
    </div>
  </div>

  <div class="console-content">
    <codemirror [(ngModel)]="content" [config]="config"></codemirror>
  </div>
</div>
Christopher
  • 1,712
  • 2
  • 21
  • 50
  • This may be duplicate to https://stackoverflow.com/questions/11112321/how-to-save-canvas-as-png-image – Intervalia Nov 21 '17 at 18:50
  • Not really, I only have a canvas element when I use `html2canvas`, I'm asking for new ways to save the console HTML element locally. – Christopher Nov 21 '17 at 18:54
  • what is your `console` element? Can you provide some HTML to clarify? – Intervalia Nov 21 '17 at 18:56
  • Absolutely, I have added the element in question. As you can see I save said element with `html2canvas`, but its display is abnormal on certain browsers, so I'm looking for another way of saving it locally. – Christopher Nov 21 '17 at 19:02
  • In your question you state "But I have found many problems in their display on browsers other than Firefox." Does that mean that html2canvas failing to render correctly? Or do you need a new way to save a canvas to the file system? – Intervalia Nov 21 '17 at 19:05
  • I'm confused. Is the goal to save the code snippet, or to save a picture of the code snippet? If it's the code itself, why the roundtrip through canvas: wouldn't it be easier and more useful to just store the text and present it as entered? – Daniel Beck Nov 21 '17 at 19:12
  • html2canvas does fail to render correctly therefore I'm looking for a new way to save the canvas to the file system. The goal is to save a picture of the code snippet, that's why the text editor, canvas and html2canvas are necessary. – Christopher Nov 22 '17 at 08:57

0 Answers0