HTMLShot :

A javascript library aims to convert HTML element to Image (such as Screenshot) until upload this image & save it on server.

Brief , HTMLShot imagify HTML element(s) & upload it on server .

Install :

npm install htmlshot;

Client Side :

Import in HTML page :

   ./node_modules/htmlshot/index.js

Then , you can use this library in client side as following :

- Simple :

Imagify the whole HTML page (body element), and when the snapshot is ready, create an IMG element & append it on Body Element.

  var test1=imagify(d.body,(base64)=>{
      $('body').append('<img src="'+base64+'"/>')
  });

- More complex (with more options):

Imagify the first DIV with CSS class col-lg-6, and specify the output mimetype (image/jpeg) as well as quality of this image (0.01); known that 1.0 is the full-quality (the best quality).

var t2=imagify({ui:d.querySelectorAll('.col-lg-6')[0],mimetype:'image/jpeg',quality:0.01},(base64)=>{
    OpenInNewWindowTab(base64);
})

Server Side :

On server side , the library exposes a function with two parameters :

• Base64 code of image.
• full Path of image to be saved on server .

  mkdir test_htmlshot;
cd test_htmlshot;
touch justTest.js;
npm install htmlshot;

In test_htmlshot/justTest.js adds :

var imagify=require('htmlshot');
var data=' data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAD4SURBVHjaYrm7igEd/IfSjMiCTH/+MDAohd4FYyC7gV8znwGEQWwkcQam378RuoDsemGdPAYQBrGRxBlYfv1i2H9+jrIDSEBSP5GB4ddTsKSwZiIDUBzmjAOMx6cw/LfIvsvA8HE/A1bA78hwYqoyA+OBXgaQafsVdCwY5HXMUdQ8vHKS4cGVEyCmI8vPnwwHgIzG149u1MsrcaIoBIoxAOUbQVaD3AgC9opKLAwM328xvH39E+JGUXYGkNiLpwz2ID4L1NcOwvxvGG5cYmC4fh1sA4OmJoODhgbYx2CPMq4qBysE+QQkALKmAWoziAYFEUijI0CAAQDkpFzX1sj/9wAAAABJRU5ErkJggg==';
imagify(data,'mystar');

Then, in terminal :

    node justTest.js;

Now check test_htmlshot/mystar.png .

And Congrats!!