Convert HTML to PNG

Asked

Viewed 2,886 times

5

How to convert, via code javascript or php, html (DOM) from the page being displayed to an image?
I need the page shown to the user to be converted into an image file in the format png for the same download and that it is started automatically.

php javascript html

4 answers

7


I would use the library: gift-to-image
You can read the documentation about its use here

Here comes an example:

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then (function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img); //esse método exibe a imagem na própria pagina
    })
    .catch(function (error) {
        console.error('erro exibido caso falhe', error);
    });

How do I open the image on another page?

Simple, refer to a blank page as the value of Document to be used.

How do I transform the image and start downloading it altomatically?

domtoimage.toPng(document.getElementById('my-node'), { quality: 1 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'NomeDaImagem.png';
        link.href = dataUrl;
        link.click();
    });

  • Document.appendchild(img); causes the image to appear on the same page? How do I open on another? Or download it automatically?

  • 1

    @lucaswmolin this, the appendchild method will display the image on the page itself. You can open another by changing the url for Document and open it via JS code. To download automatically I would suggest transforming the image into a BLOB file and using a library like Filesaver (link - https://github.com/eligrey/FileSaver.js/) there are some examples in the documentation, it is quite simple.

  • want me to incorporate your questions in my answer? @lucaswmolin

  • Yes, please.

  • @lucaswmolin edited, I hope you are satisfied with the result :D

  • A simple question: my-Node is which element? <html>,<body>...?

  • Is the body element

  • No download, appears "Fault - Network error".

  • @lucaswmolin this is due to a configuration in Chrome, see this link https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0ahUKEwj_56O7idrWAhUJQpAKHbtxDfYQFggnMAA&url=https%3A%2F%2Fproductforums.google.com%2Fd%2Ftopic%2Fchrome%2F7XBU6g6_Ktc&usg=AOvVaw3S05AkdtqqRd_aiCG-tLmS

  • @lucaswmolin when succeeding using what I indicated in the reply I ask you to mark it as correct, helps other users who are having the same problem to know that you got it this way.

  • Apparently it works, but with small pages, which generate images of a few KB. I am dealing with images of some MB, which give error in the download.

  • 1

    @lucaswmolin in the documentation there is a mention of a compression feature to prevent this kind of error, you can also achieve this with my second code by decreasing the quality from 1 to something smaller :)

Show 7 more comments

4

I think it is not possible to save a screenshot with Javascript. But an interesting alternative is to draw the html you want in an element canvas, and then use the method toDataURL() to take the data in base 64, and save in image

document.getElementById('desenhar').onclick = function (){
  var c = document.getElementById("teste");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95,50,40,0,2*Math.PI);
  ctx.stroke();
}

document.getElementById('salvar').onclick = function (){
  console.log(document.getElementById('teste').toDataURL());
}
<canvas id="teste"></canvas><br>
<button id="desenhar">Desenhar</button>
<button id="salvar">Salvar</button>

  • sensational, I hadn’t thought of this +1 alternative

  • @Peace :) but I would still go by yours if the OP can use third party lib

  • let’s hope that it can

3

  • Well, if the author of the question wanted to use this solution in php it is good to pay attention to the first comment: For this to work your Apache service must be set to 'Allow service to interact with desktop' otherwise you will just get a blank image.

2

Browser other questions tagged php javascript html

You are not signed in. Login or sign up in order to post.