Asked  7 Months ago    Answers:  5   Viewed   40 times

I would like to generate a screenshot thumbnail of any given url using strictly javascript. If this can't be done can anyone point me in the right direction to do this with my own api?

edit I just decided to cheat and use frames because it was for something I was doing for fun anyway, but thanks for all the great answers khtmltox is probably the best choice if you want to do something like this... they also have php bindings aswell.



If you look at wkhtmltox, there's native lib/app for converting a webpage to an image.

<?php // file: img.php

<!-- Your Website -->

<img alt='ldr'/>

<script type="text/javascript">
        var url='';

In case the comment wasn't clear enough, you need PHP somewhere which could run a native program.

Wednesday, March 31, 2021
answered 7 Months ago

Keep in mind that imagaegrabscreen is Windows-only. If you have multiple displays set up, this function will only grab the primary display. Also, 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.

This discussion covers the use of imagegrabscreen pretty well: Getting imagegrabscreen to work

There are a lot of other discussions about saving webpages as images, too - here are a few:

  • Website screenshots using PHP
  • Web Page Screenshots with PHP?
  • How can I generate a screenshot of a webpage using a server-side script?
  • PHP: How to capture browser window screen with php?
  • What is the best way to create a web page thumbnail?
  • Screenshot of current page using PHP
  • shell tool which renders web site including javascript
  • In any languages, Can I capture a webpage and save it image file? (no install, no activeX)
Saturday, May 29, 2021
answered 5 Months ago

You can probably write something similar to webkit2png, unless your server already runs Mac OS X.

UPDATE: I just saw the link to its Linux equivalent: khtml2png

See also:

  • Create screenshots of a web page using Python and QtWebKit
  • Taking automated webpage screenshots with embedded Mozilla
Wednesday, June 2, 2021
answered 5 Months ago

This is done by only using a part of the image as the thumbnail which has a 1:1 aspect ratio (mostly the center of the image). If you look closely you can see it in the flickr thumbnail.

Because you have "crop" in your question, I'm not sure if you didn't already know this, but what do you want to know then?

To use cropping, here is an example:

//Your Image
$imgSrc = "image.jpg";

//getting the image dimensions
list($width, $height) = getimagesize($imgSrc);

//saving the image into memory (for manipulation with GD Library)
$myImage = imagecreatefromjpeg($imgSrc);

// calculating the part of the image to use for thumbnail
if ($width > $height) {
  $y = 0;
  $x = ($width - $height) / 2;
  $smallestSide = $height;
} else {
  $x = 0;
  $y = ($height - $width) / 2;
  $smallestSide = $width;

// copying the part into thumbnail
$thumbSize = 100;
$thumb = imagecreatetruecolor($thumbSize, $thumbSize);
imagecopyresampled($thumb, $myImage, 0, 0, $x, $y, $thumbSize, $thumbSize, $smallestSide, $smallestSide);

//final output
header('Content-type: image/jpeg');
Friday, June 18, 2021
answered 4 Months ago

A simple solution is .split() and .pop() to get the last string in the array, like this:

var ext = fileName.split('.').pop();

This will get you just "txt" without the ., just append if needed. This also works on say: extension.txt as well. If it doesn't have an extension it'll return the file name, so you may want to check for this...or go a completely different direction and validate against a set or known extensions via regex.

Monday, August 2, 2021
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :