Solved

using html2canvas to capture external webpage

Posted on 2014-01-27
20
9,462 Views
Last Modified: 2014-01-28
At http://html2canvas.hertzen.com/screenshots.html the author of html2canvas demonstrates using his code to capture screenshots of external webpages.  No where that I can find does he explain or demonstrate how he makes that page work.  

There doesn't seem to be an answer to that here in EX-EX but on a concurrent site I found this conversation:

<concurrent site>------------------------------------------------------------------------------------
but i want to be able to pass an url and make a screenshot of this page. Like they do in their example page on: http://html2canvas.hertzen.com/screenshots.html

If anyone could give me a hint how to get started with that, I would be really glad.
       
Like in php i would call file_get_contents() to get the page and then echo it and use it in the ajax-success-callback? Did i get this right? –  movsky Dec 18 '12 at 12:23
       
I don't remember the PHP offhand, sorry. –  DNS Dec 18 '12 at 12:51
       
hm, okay, could you at least tell me how the call for html2canvas would look like: I have now something like: $.ajax({ type: "POST", url: "ajax.php", data: { action: 'getPageContent', url: 'google.de'; } }).done(function(html) { // How to use it from here? }); –  movsky Dec 18 '12 at 13:03
       
I don't know; it depends on how you've created your script, but that looks roughly correct. I would take a look through the jQuery AJAX docs. –  DNS Dec 18 '12 at 13:05
---------------------------------------------------------------------------------</concurrent site>

There were no further comments to that thread and I'm lost as to how to implement that suggestion from movsky .  And as usual, the concurrent site thread just petered out without resolution.  (That's why I love Ex-Ex and hate S/O!)

Can anyone help me recreate the functionality of http://html2canvas.hertzen.com/screenshots.html ?
0
Comment
Question by:DMTrump
  • 8
  • 8
  • 2
20 Comments
 

Author Comment

by:DMTrump
ID: 39813032
Thanks, leakim971 - I appreciate the help and will follow that rule from now on....
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39813095
// How to use it from here?

Open in new window


imagine you've a div in your page :
<div id="put_my_page_here"></div>

.done(function(html) { $("#put_my_page_here").html(html) });
0
 

Author Comment

by:DMTrump
ID: 39813202
Thanks, but I'm not sure that would do what I want.  The user of my page needs to be able to type in the name of an external site and get an image of that page that I can then pass on to another function.  I want my app's users to be able to create a small thumbnail of the logo or other identifying portion of another web page.

Say my site is at www.mysite.com and my user wants to snip a portion of the home page at www.cnn.com.  The user will type www.cnn.com into an input and click a button to put the top 200 pixels of cnn.com (or some other site) into an image then use my cropping tool to enlarge it and select the small portion of the page that contains the CCN logo.  See my stub page at www.theswpt.com.  The example cnn page (for example purposes only) is a jpg file already on my server.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39813227
you need help of a server (called proxy) to do that, it's not possible using only javascript

see limitations here : http://html2canvas.hertzen.com/documentation.html

once you understand that, you can use a proxy using file_get_contents(), you pass the URL of the site the user want to crop, it send back the HTML to you, you pass this HTML to htm2canvas to let it do the job as usual
0
 

Author Comment

by:DMTrump
ID: 39813284
Yes, I understand that limitation but I don't know how to do that.  I am hoping to see some example code  - especially the coupling between the proxy and ajax to put the image into the my target
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39813329
eh eh, don't think it's something complicated

php proxy (myproxy.php) :
<?php
   echo file_get_contents( $_POST["url_prodived_by_user"] );
?>

The code example you're looking for is here : http://html2canvas.hertzen.com/site/console.js

the iframeLoad function
and
the  $('#getscreenshot').click(function(e){ // bla bla part });
0
 

Author Comment

by:DMTrump
ID: 39813364
So my user submits a form that returns the url of the site desired in $siteurl

and I do the following

$im = file_get_contents($siteurl);

imagejpeg($im, 'pageimage.jpg');

// Free up memory
imagedestroy($im);
0
 

Author Comment

by:DMTrump
ID: 39813401
Then I pass pageimage.jpg to my cropper?

oops!

We crossed our posts and I'm now studying the console.js code.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39813406
your idea is good too
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:DMTrump
ID: 39813453
Okay, I'm going to try this out - thanks for the help so far - I may have more questions later so I'm not going to close the question yet.  (I have to go pick my little granddaughter from school in a few minutes!  That's even more fun than coding!!!!!)
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 39813599
This will retrieve the rendered HTML -- what you would expect to see in view source.

$im = file_get_contents($siteurl);

That's probably not what you want.  What you might want instead is to load the remote site into an iFrame and then use something like imageGrabScreen().  I say might because I do not know if this will work -- I've never tried it, so it will be a bit of a research project.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39813643
no, Sir Paseur, it will not work, you will get a security error
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 39813665
Oh, well... Like I said, I've never tried it.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39813707
The error is : Uncaught Error: SecurityError: DOM Exception 18
0
 

Author Comment

by:DMTrump
ID: 39814087
I've written many thousands of lines of embedded instrument code in C, C++ and 68HC11 Assembly.  I've written and published a dozen or so windows apps in Delphi, and created several fairly complex web apps in PHP and I'm just completely lost trying to put something together from these snippets of javascript that actually works.  In spite of all that experience, I'm a rank beginner in Javascript!

I give up for now!

I've found a commercial service (grabzit) that will do temporarily.  I still will need this code someday soon and a person who can give me a bare bones php page that accepts the POST of a URL from a form in another page and saves an image of the url's page to the server woth a random filename will get my 500 points.  So I'm letting this question ride for a while.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39814105
javascript is the assembly language for browser... you know how it's hard to learn assembly language if you jump without knowing what previous lines of code did...

Test page : http://jsfiddle.net/RbY4E/

As you're not the owner of html2canvas.appspot.com (not yet) :

http://html2canvas.appspot.com/query?callback=?
Should/Must be replaced by your own PHP proxy (check my previous comment) :
myproxy.php?callback=?

The CNN you're seeing is on a page(canvas) opened from your own domain that's why you can get a part of it using html2canvas

<div id="content"></div>

Open in new window


function iframeLoad(iframe) {
    var body = $(iframe).contents().find('body');
    html2canvas(body, {
        onrendered: function( canvas ) {
            $("#content").empty().append(canvas);
        },
        allowTaint: true,
        taintTest: false,
        logging: true
    });
}

$(document).ready(function() {
    var url = "http://www.cnn.com";
    var urlParts = document.createElement('a');
    urlParts.href = url;   
    
    $.getJSON("http://html2canvas.appspot.com/query?callback=?", { xhr2:false, url:urlParts.href }, function(html) {
        iframe = document.createElement('iframe');
        $(iframe).css({ 'visibility':'hidden'}).width($(window).width()).height($(window).height());
        $('#content').append(iframe);
        d = iframe.contentWindow.document;
        d.open();
        $(iframe.contentWindow).load(iframeLoad.bind(null, iframe));
        $('base').attr('href',urlParts.protocol+"//"+urlParts.hostname+"/" + urlParts.pathname);
        html = html.replace("<head>","<head><base href='"+urlParts.protocol+"//"+urlParts.hostname+"/" + urlParts.pathname + "'  />");
        if($("#disablejs").prop('checked')){
          html = html.replace(/\<script/gi,"<!--<script");
          html = html.replace(/\<\/script\>/gi,"<\/script>-->");
        }
        d.write(html);
        d.close();
    });

});

Open in new window

0
 

Author Closing Comment

by:DMTrump
ID: 39816516
Thanks for all the effort you put into trying to help me.  I have decided that the commercial solution better fits my needs.  It is more inclusive of the sites it can handle for my clients than html2canvas claims to be.  That said, I'll still work this through someday as I won't admit defeat.  But I'm in a rush and I'll go with Grabzit for this task.  Thanks a lot, anyway.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39816652
Thank you Sir Paseur for your kind words.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

27 Experts available now in Live!

Get 1:1 Help Now