Viewed   146 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.

 Answers

1

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

<?php // file: img.php
    $img=render_image($_GET['url']);
?>


<!-- Your Website -->

<img alt='ldr'/>

<script type="text/javascript">
    $(document).ready(function(){
        var url='http://google.com/';
        $('#img').attr('src','img.php?url='+encodeURIComponent(url));
    });
</script>

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

Monday, November 14, 2022
1

You're doing it wrong. Store each piece's location at all times in javascript, and then just submit that data and re-build the images/locations based on the passed javascript data.

Wednesday, November 2, 2022
 
albzi
 
2

*Updated to include all of the fields you are editing

It sounds like you have the right idea. You would probably want to create a new div on your page for the edit modal dialog.

<div id="dialog-edit" style="background-color:#CCC;display:none;">
    <input type="hidden" id="editLinkId" value="" />
    Link Name: <input type="text" id="txtLinkTitle" class="text" />
    Link Description <input type="text" id="txtLinkDescription" class="text" />
    Link URL <input type="text" id="txtLinkURL" class="text" />
</div>

When the user clicks your edit button you'll want to populate the hidden field and the text box with the values of the link they clicked on and then turn the dialog on.

$('.edit').click(function () {
            //populate the fields in the edit dialog. 
            var parent = $(this).closest('div');
            var id = parent.attr('id');

            $("#editLinkId").val(id);

            //get the title field
            var title = $(parent).find('.linkHeader').html();
            var description = $(parent).find('.linkDescription p').html();
            var url = $(parent).find('.linkDescription span a').attr("href");
            $("#txtLinkTitle").val(title);
            $("#txtLinkDescription").val(description);
            $("#txtLinkURL").val(url);

            $("#dialog-edit").dialog({
                bgiframe: true,
                autoOpen: false,
                width: 400,
                height: 400,
                modal: true,
                title: 'Update Link',
                buttons: {
                    'Update link': function () {
                        //code to update link goes here...most likely an ajax call.

                        var linkID = $("#linkID").val();
                        var linkTitle = $("#txtLinkTitle").val()
                        var linkDescription = $("#txtLinkDescription").val()
                        var linkURL = $("#txtLinkURL").val()
                        $.ajax({
                            type: "GET",
                            url: "ajax_calls.php?function=updateLink&linkID=" + linkID + "&linkTitle=" + linkTitle + "&linkDescription=" + linkDescription + "&linkURL=" + linkURL,
                            dataType: "text",
                            error: function (request, status, error) {
                                alert("An error occured while trying to complete your request: " + error);
                            },
                            success: function (msg) {
                                //success, do something 
                            },
                            complete: function () {
                                //do whatever you want 
                            }
                        }); //end ajax
                        //close dialog
                        $(this).dialog('close');
                    },
                    Cancel: function () {
                        $(this).dialog('close');
                    }
                },
                close: function () {
                    $(this).dialog("destroy");
                }
            }); //end .dialog()

            $("#dialog-edit").show();
            $("#dialog-edit").dialog("open");

        }) //end edit click
Thursday, August 11, 2022
 
2

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
Monday, September 19, 2022
 
4

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: My.File.name.has.an 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.

Tuesday, November 8, 2022
 
Only authorized users can answer the search term. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :