-1

I would like to know if there is a way to make a live preview of websites from URL in form of a thumbnail? Idea is that user enters the URL on his account and he gets a live preview of a website in form of thumbnail, just like google chrome has shortcuts of recently visited websites, but should work in any browser. I tried with iframe but I got "website inside website", could click on links, menus and everything. It was really weird, ha. Thanks ;)

Vladan Panic
  • 1
  • 1
  • 1
  • which is it thumbnail or live? Screenshots can easily be done using wkhtmltopdf or some other tool, and a live site though an iframe will have clickable links.. but you could place a div that covers the iframe to stop obvious clicking, though the site will not scale like an image and will have all its responsiveness.. – Lawrence Cherone Jun 12 '17 at 20:28
  • You might be able to use HTML5, JavaScript and a canvas to create the live thumbnail. Take a look at this related post: [Question 4912092] [1]: https://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots – Sean N. Jun 12 '17 at 20:40

2 Answers2

1

You could iframe the site, decorate it with a border, use CSS transformations to shrink it to a "thumbnail", then use CSS to ensure that mouse interactions are ignored.

#frame {
  border: 10px solid blue;
  width: 500px;
  height: 500px;
  pointer-events: none;
  -webkit-transform: translate(-200px,-200px) scale(.2, .2);
  -moz-transform: translate(-200px,-200px) scale(.2, .2);
  -o-transform: translate(-200px,-200px) scale(.2, .2);
  -ms-transform: translate(-200px,-200px) scale(.2, .2);
  transform: translate(-200px,-200px) scale(.2, .2);
  overflow: hidden;
}
<iframe id="frame" src="https://stackoverflow.com" scrolling="no"/>
Nate
  • 1,268
  • 13
  • 20
0

use the embed tag with a src and type of text/html example 

<embed src="+page+" type="text/html"/>
Rick
  • 1,035
  • 10
  • 18