Capture screenshot of website on the client (Javascript or flash) - asp.net

Is there some method to issue a screen capture(browser window content only) from the browser with javascript or a embedded flash object etc so that a full quality image of the page content be saved or printed or an alternative approach.
I have a web app (asp.net 3.5) with google maps and other ajax operations client side like a custom tile server. I have been trying to implement a way for the user to print good quality captures of the webpage.
I have used the basic Window.Print() but in both IE and FF there many artifacts within the google maps and some items such as the popped up bubble doesnt print. I have experimented with save pdf thru cutepdf(just to post an example here) and the quality thru window.print() is low too.
For example, A screenshot with FireShot addon is perfect and what I want the client to have. however that is FF only and I cant ask the clients to install addons/activex controls on their browsers.
Have a look at this download example zip file(4mb) with:
Example screen shot using FireShot
(example of what I want to achieve
thru a html/JS button with in the
page)
Firefox Window.Print() result
(cutepdf used to save as pdf)
IE Window.Print() result (cutepdf
used to save as pdf)
note in 2,3 the little bubble is not printed even when open.
For now, I have added the function on my site to go fullscreen and guide the user to take a screenshot or call the window.print() function.
I am still looking for a method to print/capture my page.
are there any flash/activex controls that I can include in my page and thru them provide a quality print mechanism?
Thanks again for all the help but I still need more. :)
Thank you in advance.
http://rapidshare.com/files/311849636/Print_examples.zip.html

You'll go to all that work only to find that a simple app like Snagit will do the job. Building a SnagIt Screen Capture Plugin

The only way to reliably provide a high-quality print version of whats on-screen in a rich web application is to use the client-side, say JavaScript, to send the server precise information about the current state (where bubbles are, etc.) and use that to generate an image that mimics the positioning. Convert that image to a PDF or what-have-you, then send to the client for download.

Google also has a Static Maps API that might give you good results. I looked into it myself once, and only didn't go with it since (at the time) there were limitations on how many points they could support in a polyline.

I don't think this is possible. It would be quite a security risk to be able to capture the user's screen through scripting (imagine bad sites capturing screen information).

No there is not, though it would come in quite handy at times for bug reporting etcetera.
You will probably get the best result by creating a separate version of the page as a PDF have that being generated. It's no quick fix by all means, but you'll get superb print quality and total control over everything. The map part will probably be a bit tricky though as you need to get the map as a bitmap on the server somehow, and if it's not in flash on the client I don't know how you'd do that.

Related

Reading a PDF back from an iFrame?

I have a PDF document that is getting generated on the fly, and rendered on the fly to an iFrame within a radwindow. Basically the document is already largely prepopulated, however the user will still have a chunk of information that they are required to enter. I've found a good amount of information about sending a pdf TO an iframe, but not much information about going the other way. I have a button within the radwindow that can access the iframe object, however I'm somewhat lost as to where to go from there.
EDIT: The PDF is an editable form. I'm trying to pull back the entire PDF document as is, after the client side makes their entries to the form.
I think you'll need to send the file to the user so they can edit it locally and instruct them to upload it.
The content-disposition header with value attachment can help with the first task and you can use RadAsyncUpload to upload it: http://demos.telerik.com/aspnet-ajax/asyncupload/examples/overview/defaultcs.aspx.
I am not aware of ways to tap into the PDF viewer plugin the browsers use to show the PDF. Perhaps there is API from Adobe or some other third party plugin but that would rely on them and is out of your control.
Perhaps the JS PDF viewer from FireFox has something: https://mozillalabs.com/en-US/pdfjs/ but I don't know how stable and usable it is.
As per what was described in the comments, I ended up using postbacks through the PDF's themselves along with 1 pixel fields to store data required to identify the documents. It's a little hacky, but functional. I'm leaving this as an actual answer as this is as close to a real solution to the problem I originally had. This has been up and running for close to 4 years in this manner, and thus far hasn't caused any issues.

How to take a screenshot of the user's screen when the user places an order?

I don't mind if it is a print screen or export proccess of the page to jpg or even to pdf... how can it be done?
Assuming you literally want to save a screenshot of the user's desktop, this can't be done with server-side technology like ASP, since the user's desktop is not on your server (obviously).
There might be a JavaScript solution (I couldn't find one), or you can use ActiveX (Take a screenshot of a webpage with JavaScript?), which might not be a good idea if this is a public ordering system, since many users won't be able to use (or will turn off) ActiveX--I know I'm personally alarmed to see ActiveX notification these days, and that would likely change my mind about placing an order in the first place.
However, I would very much question the need to take a literal screenshot, instead of just recording the relevant data in a database or log somewhere (and then you could simulate the user's screen).

How to add Facebook Like button to a Flex app?

I am working on a Flex AS3 application and wanted to add the Facebook Like button inside the app. I am unable to find any API or anything apart from the http://developers.facebook.com/docs/reference/plugins/like code generator.
Any ideas on how this might be accomplished? I am quite new to the recent changes in the Facebook Platform, so any info would be appreciated.
A direct "like" button should not be possible, since Facebook needs to sandbox the whole thing. Both like button formats (iframe and xfbml) use a sandboxed iframe, so nobody but facebook can set "likes" or know anything about the user.
For that to work with Flash, I think facebook would have to provide the button itself as a SWF file so you can load it in Flash. Then it can create a sandbox within itself and thus load the user information safely. Very much like the Chromeless Youtube Player, where it's almost impossible for Flash to access the actual FLV URL (even through introspection).
But even so, I don't think this would provide enough security... realize that you are dealing with very private user information and credentials here.
The only way I know you can "like" stuff through Flash is first doing the whole Facebook Connect thing (several popup windows asking the user for permissions) and then using the API of your choice to do the actual "liking", for instance, with the Graph API:
http://developers.facebook.com/docs/api#publishing
The closest information I could find are these 2 items so far. Hope it helps you in your journey.
Facebook Developer Site: Source
Facebook like button in flash
I hate answering "no" to a question because what I really mean is "I don't know and I can't find a way". I'm sure your Google-fu is as good as mine. All I can see are Facebook forum posts like this where people are asking the same question and no one is answering.
The examples they give of the like button are either embedded in iFrames or using XFBML <fb:like ../> tag. There are no examples of how to like something using their new graph api or either of their old APIs (FQL and REST API).
I had to get a Facebook like button in a html page (looked like a header on the top) and get the swf embedded below. As its a complete flex app in my case, this work around was possible and plausible

ASP.net: Display PDF in a asp.net web page

User click on a link button and it will direct them to a url that is dynmaically generated which a pdf file. The browser will prompt the user to either save or open it.
I want to know if it is possible to downlaod the pdf file to the server then show the pdf file in the asp.net web page. When i google on this question, 99% of top link are some third party component. Is it a way to do this without purchase any 3rd party component?
thank
I use itextsharp, its a free open source c# port of the java itext library.
Makes generating dynamic pdfs in asp.net a breeze and there is lots of documentation/examples floating around.
I don't think that you'll have much luck without a 3rd party component. First, the issue isn't showing the PDF, it is generating it. For that, you'll need a library to help. Rolling one yourself would not be cheaper unless you have an enormous amount of unpaid time on your hands.
With respect to third-party controls, I recommend and use DynamicPDF from CeTe.
Yes there is a way to do this without a 3rd party tool, but it involves coding a PDF-to-html translator.
If this is something for a business, the RoI for the 3rd party control is that you don't have to spend hundreds of hours coding & testing this component, when you could buy one for just a few hundred dollars.
Now, an alternative is to code a page which displays the data in the same way which the PDF file generates it (this could actually be handled by RDLC). So that when the user clicks the link button, they are taken to this display page, from which they can download the PDF version if they want a local copy.
Regardless of how you generate the PDF, I have found a better user experience if you open the PDF in an IFRAME instead of the full browser window. You can give users instructions and maintain the browser navigation.
I think what you want to do is by going to: http://my_site.com/generate-pdf.aspx?=someId
this should in fact just show the PDF file?
What you need to do is change the Response type.
See here for how to do this with images.
Look up the Content-Disposition HTTP header. You can send back a value that requests the content be displayed inline instead of downloaded.

Using ASP.Net, is there a programmatic way to take a screenshot of the browser content?

I have an ASP.Net application which as desired feature, users would like to be able to take a screenshot. While I know this can be simulated, it would be really great to have a way to take a URL (or the current rendered page), and turn it into an image which can be stored on the server.
Is this crazy? Is there a way to do it? If so, any references?
I can tell you right now that there is no way to do it from inside the browser, nor should there be. Imagine that your page embeds GMail in an iframe. You could then steal a screenshot of the person's GMail inbox!
This could be made safe by having the browser "black out" all iframes and embeds that would violate cross-domain restrictions.
You could certainly write an extension to do this, but be aware of the security considerations outlined above.
Update: You can use a canvas utility function to get a screenshot of a page on the same origin as your code. There's even a lib to allow you to do this: http://experiments.hertzen.com/jsfeedback/
You can find other possible answers here: Using HTML5/Canvas/JavaScript to take screenshots
Browsershots has an XML-RPC interface and available source code (in Python).
I used the free assembly UrlScreenshot.dll which you can download here.
Works nicely!
There is also WebSiteScreenShot but it's not free.
You could try a browser plugin like IE7 Pro for Internet Explorer which allows you to save a screenshot of the current site to a file on disk. I'm sure there is a comparable plugin for FireFox out there as well.
If you want to do something like you described. You need to call an external process that prints the IE output as described here.
Why don't you take another approach?
If you have the need that users can view the same content over again, then it sounds like that is a business requirement for your application, and so you should be building it into your application.
Structure the URL so that when the same user (assuming you have sessions and the application shows different things to different users) visits the same URL, they always see same thing. They can then bookmark the URL locally, or you can even have an application feature that saves it in a user profile.
Part of this would mean making "clean urls", eg, site.com/view/whatever-information-needed-here.
If you are doing time-based data, where it changes as it gets older, there are probably a couple possible approaches.
If your data is not changing on a regular basis, then you could make the "current" page always, eg, site.com/view/2008-10-20 (add hour/minute/second as appropriate).
If it is refreshing, and/or updating more regularly, have the "current" page as site.com/view .. but allow specifying the exact time afterwards. In this case, you'd have to have a "link to this page" type function, which would link to the permanent URL with the full date/time. Look to google maps for inspiration here-- if you scroll across a map, you can always click "link to here" and it will provide a link that includes the GPS coordinates, objects on the map, etc. In that case it's not a very friendly url but it does work quite well. :)

Resources