Get image of an external Url with Html2canvas

Question

Get image of an external Url with Html2canvas

Navigation

#1 by (1 votes)

2

Dear:

I do not know much canvas , but I tried to make a screnshoot of a web page through the URL . Is this possible with html2canvas ? since I have done it with other functions, but they do not allow me to capture the entire web page, nor can I change the quality of the image.

function canvas () {

    var url = "http://www.portalinmobiliario.com";
    //var canvas = document.getElementById('div');
    var canvas = url;
    alert(canvas);
    var dataURL = canvas.toDataURL();
    alert(dataURL);
    var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
    $('#preview').html('<img src="' + dataURL + '" alt="' + url + '">').show();

}

javascript canvas url screenshot

asked by Cristian Acevedo Miranda 20.12.2016 в 23:27

source

1 answer

Problem when doing massive load of events in the calendar ios validate negative numbers

score 1 · Answer 1

html2canvas is one of the best projects to represent (in a non-perfect way) elements HTML in an element canvas . But to use the methods toDataURL and getImageData the images contained in the canvas you have to come from the same domain, otherwise it will send you a security message. When you enter images from another domain you will get a tainted canvas that will not let you call the previous methods on it.

Here is an example of how to use html2canvas :

HTML code

<ul id="list">
    <li>Uno</li>
    <li>Dos</li>
    <li>Tres</li>
</ul>

<div id="container"></div>

JavaScript code

var ul = document.getElementById("list");
var container = document.getElementById("container");

html2canvas(ul, {
    onrendered: function(canvas) {
        container.appendChild(canvas);
    }
});

And here a jsfiddle running so you can try the code.

But for what you want, if the HTML that you try to represent is not in your domain, it is best to use tools like PagePeeker or ShrinkTheWeb .

Note: In your example you are trying to call the toDataURL method in the variable canvas that is of type String (the variable that refers to the element canvas is commented)