How download a preview of a webpage client-side?

Question

I'd like to get an image of an URL provide by user.

I thought to make a fetch or an AJAX request to get the HTML code and then convert it with HTML2CANVAS but it doesn't seem to be working.

This is what I tested directly in the console of Trello website, line per line:

function preview_ws(url) {
  $.ajax({
    url: 'https://cors-anywhere.herokuapp.com/' + url,
    success: function(result) {
      html = document.createElement("html");
      html.innerHTML = result;
    }
  });
}

preview_ws("https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props")

// many errors like GET https://trello.com/images/components.png 404
// the HTML seems to correspond (title is Vue.JS)

html2canvas(html).then(canvas => {
    document.body.appendChild(canvas)
});

// then, I have errors:

Then I have errors:

Error while parsing the 'sandbox' attribute: 'allow-storage-access-by-user-activation' is an invalid sandbox flag.
Promise {<rejected>: "Unable to find element in cloned iframe"}
Uncaught (in promise) Unable to find element in cloned iframe

I also tried with:

html2canvas(html.querySelector("body")).then(canvas => {
    document.body.appendChild(canvas)
});

but I get the sames errors.

So how can I make what I want? I' m reminding you I want something on the client-side.

Welcome to Stack Overflow. You pass a parameter to your function, `url`, yet never use it. Do you see any errors in console? Please provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example — Twisty, May 15 '20 at 16:53
You're not waiting for the ajax request to complete - check what `html` is before you attempt to use it — freedomn-m, May 15 '20 at 17:08
I edit my code, I was wrong when I wrote the snippet. All errors I got is here, with all my code (I tested directly in console). The HTML is what I want (`//the HTML seems to correspond (title is Vue.JS)`) — Arthur Fontaine, May 15 '20 at 17:08
`html` in `html2canvas` is the element that I created when Ajax successed — Arthur Fontaine, May 15 '20 at 17:11
Also `html` would be out of scope. Since it's defined in `preview_ws()` we cannot access it outside that function. — Twisty, May 15 '20 at 17:32
I don't use `var` keyword, so I can access outside function normally. More over, I log `html` and it corresponds to the page I want. — Arthur Fontaine, May 15 '20 at 17:35

score 0 · Answer 1 · answered May 15 '20 at 17:37

Consider the following code.

HTML

<div>
  URL <input id="url" type="text" value="https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props" /> <button id="go">Fetch</button>
</div>
<div id="preview"></div>

JavaScript

$(function() {
  function preview_ws(u) {
    console.log("Fetch", u);
    $.ajax({
      url: 'https://cors-anywhere.herokuapp.com/' + u,
      success: function(result) {
        var $ht = $("<html>");
        $ht.html(result);
        console.log("HTML", $ht[0]);
        html2canvas($ht[0].body).then(canvas => {
          $("#preview").html(canvas);
        });
      }
    });
  }

  $("#go").click(function() {
    var url = $("#url").val();
    if (url !== "") {
      preview_ws(url);
    }
  });
});

Here we create an HTML Object and then populate it with the results. We can then pass this to the html2canvas as described in the documentation.

@ArthurFontaine the error, *Cannot read property 'ownerProperty' of undefined*, suggests that something being passed into `html2canvas` is not correct. Please pastebin or screen shot the entire console result. — Twisty, May 16 '20 at 16:45

How download a preview of a webpage client-side?

1 Answers1