The title is very self-explanatory, but I'll get into a deeper explanation here. I have a Firefox extension for my image hosting site (which is currently down).
It currently has two features:
Right click on image and remote upload
Right click on image, get a Javascript popup to enter new width and upload
What the extension still needs is a feature (or two) which allows the user to upload the current visible things on the browser or a full capture of the browser (including what's under the scrollbar).
What I have tried:
I have tried copying various pieces of code from other extensions and combine them with my own. They included stuff such as canvas which I did not really understand. I was able to get a base64 image string somehow (I don't exactly remember how). With that string, I thought the best way to achieve my goal is send it to my image host via XMLHttpRequest and create the image in my host. The ResponseText would be a link to the image.
As you can see, I was doing too much here - I obviously don't need to do extra handling in my server side for this issue. I think there are ways to handle everything from the extension only, without extra coding in my server-side (correct me if I am wrong).
Actual issue
This is the add-on: https://addons.mozilla.org/en-US/firefox/addon/imgit/
As you can see the two context menus that get added by the extension, I need a third context menu, which has an arrow to the right to open another menu with the two new options I need:
Capture visible screen and upload
Capture full screen and upload
The first option should capture and upload what's visible in the browser, excluding what's under the scrollbar. The second option should capture everything and upload it to my website, including what's under the scrollbar.
Adding the context menus is not a big deal, but making them behave the way I want is the problem I have. I have no idea how to start and my research around the web couldn't get me further. Creating the image via Javascript somehow (using canvas which I don't know how) and sending a base64 encoded string to my website could actually work, but taking the snapshot and making it base64 encoded is the problem. I'm also unsure if Firefox extensions actually let me use Ajax to send/receive data.
What I need from you
I need a logical approach to this issue. If you have an idea, please answer and showing code snippets would be really appreciated. I'm not a Javascript guru, but with some information on how to start, I could get myself out of this mess.
What is the best way to achieve what I want?
Check out the grabScreen function of the devtools' screenshot command.
Related
I saw How to hide html source & disable right click and text copy? . One of the answers say use ctrl+u to view the source. But, using shortcut.js I can override ctrl+u as well. How do I view source in that case.
There is no way to prevent this. Someone could easily download the page using a non-browser tool like curl or wget, or log all HTTP traffic with Wireshark.
Use this. http://www.fiddler2.com/
Depends on the browser, but you can go to View -> Page Source in most to view the source. You cannot override that, however.
Furthermore, it's considered bad practice, and someone could also just as easily override the functionality through a tool like Firebug.
You can't stop people. It will be passed over the network, and sniffable through Fiddler, or someone can use a text based browser, or disable Javascript entirely, or look through their cache folder for the files they downloaded from your site.
You cannot stop people from seeing your source.
Well it's not possible to prevent users from seeing your script. But what you can do is to make it mire harder that user quits trying after few common methods.
I recommend you to load an initial page. Then load the whole page by using ajax. You can show a friendly loading gif too. This technique has following adanages,
browsers don't show generated HTML. Developers knw how to see this. But Normal user will not find it easily
if any user just press Ctrl+u it'll show the initial page.
wget, curl tool will not work at the first time.
additionally you can obfuscate the main page (which you are going to load by Ajax).
It's nearly impossible to stop people fetching the HTML from your website. I don't see any reason you'd want to hide it in the first place anyway. Hiding something?
Want to view the source no matter what javascript is being used to hide it? cURL the page.
Even if you disable right-click, you can still do a snapshot by pressing the prt scrn key on your keyboard then pasting it into an image editor.
You can't disable it. There are ways to encrypt it, but way more trouble than it's worth.
It's impossible to hide the source, HTML and Javascript are interpreted languages, that mean the browser will "compile" the code on the clients machine.
All,
I have a requirement to enable users of our web page to download jpeg images of the Bing maps that we have put on our forest fire simulation dot net aspx web page. The page in question presently displays a Bing map and up to 96 shapes in as many layers which can take up to 20 seconds to load completely. I could put all these shapes on one layer if it would help - but I an not sure that it would and I thought I would ask here first.
Apparently, any "complicated" client side actions (like ALT-print screen, print from the web page, mwsnap3, or other third party solutions) will not suffice, so I am told to implement a button on the page that will download (or make available) a jpeg image document/image when it is pressed on the page.
I started with a great thread at Convert webpage to image from ASP.NET. ,which is really close to what I want, but the page gets rendered on the browser.ReadyState != WebBrowserReadyState.Complete transition, which fires off before my shapes are loaded on the Bing canvas. I tried to render the page on the DocumentTitleChanged event (and then tried to change the title when my shaped completed loading), but this did not work either.
I tried to force the "Print screen" character with javascript (see Is it possible to simulate key press events programmatically?), but this translated into a comma (decimal 44) and did not work as expected.
I also see that HTLM5 has some support for this ( http://www.nihilogic.dk/labs/canvas2image ) but while this worked in FireFox, it did not work in IE, which is the browser of choice. I also want to run this on mobile devices, which might not support HTML5 for some time either.
I have a few questions:
1 - Is there another (simple) way to print the contents of the web page that I am missing?
2 - Is there some other WebBrowser event that I can fire that will make more sense)?
3 - Would it help if I stated with some other control then put the maps and shapes on this control for subsequent printing?
4 - Does this go against the grain of web browsing and is just a bad idea (seems that if I can force a 'print screen' then evil web sites could force a Ctrl-Alt-Delete button sequence)?
Thanks - Steve
It might not be an approach you want to do as it will require you to repeat alot of the functionality you already have in a different way but the only truely full proof way to do this is to get the map as an image from the bing maps static imagery service and use GDI+ to draw onto the map yourself then just serve that image direct to the user. Gets round any browser issues but a fair amount of work depending on your requirements:
http://rbrundritt.wordpress.com/2009/02/22/drawing-routes-with-the-ve-web-service/
If you go on the bottom of the page there's a "Report bug" link.
They let you highlight parts of the screen and sent it along with the bug description.
Any idea of how this could be implemented?
It uses Google's Feedback tool, which is a heavy implementation of JavaScript.
Taking a look at their script, they even have a JavaScript-ported version of a JPG encoder that they use to render the user-modified HTML page into an image, which I assume is then AJAX'd on over to Google when the user hits send.
I don't think it is possible to take a screenshot of your browser using javascript(even if it was possible it'd require your permission).
So maybe they don't take a screenshot. Maybe they just store the url & coordinates of the rectangle you select(and other usual stuff like your browser details, screen resolution, OS etc.).
With that information they can launch the url on the server side and take screenshots there.
I want my users to be able to take a screenshot of the webpage (or me defining the size of the screenshot) and then allowing them to save it to their computer.
Does anyone know of a good JS lib that allows you to do this?
I know there are addons for the browser, but i wanted something pure JS so that the user can just click in a button and a "save as" link apears with a screenshot of what they are looking at.
Thanks for the help.
/fmsf
Browsers don't expose APIs that allow this to web pages, so there is no way to achieve this using plain JavaScript running in a page.
The only way to achieve this would be to have screen grabs prepared on the server, and a normal download link pointing to the appropriate one.
This can't be done in JavaScript. Taking screen shots outside the current document/domain is a potential security problem and is not possible. See my question about getting the pixel colour from the current mouse position for more background.
If you need to transmit the screen shots onto your server, look into external applications that interact with your web site. Open-source bug tracker Mantis for example has a screenshot application for Windows.
If the screenshot and the saving of the file are both to take place on the client computer, check out Fireshot for Firefox. It doesn't seem to offer any interaction capabilities with a pre-defined web site but may be the right tool for your users.
HTML2Canvas (http://html2canvas.hertzen.com/) recreates the rendered HTML into a canvas. And you can save the canvas as an image. That could do the trick, although it's not 100% accurate (and for good reasons - that would open security holes in browsers if that was possible, see https://stackoverflow.com/a/1936084/1333479).
I want to open a file dialog via FileReference.browse() but I get #2176 error which means that this action can only be invoked upon some user interaction. I'm aware of security considerations but in my scenario I have a thin flash movie which merely displays an image and the whole UI is in javascript (I heavily use javascript <-> actionscript communication).
So the question is - do you think it would be possible to invoke FileReference.browse() upon the user interaction coming from javascript?
No. If it is anything like accessing the clipboard, then you are stuck out of luck. I have tried all sorts of hacks to get around that, from setIntervals to using apply, I even tried using a ByteArray to manipulate code directly. No soap.
For that matter, you'll have to upload the file to a server using FileReference (unless you're using AIR). This is really annoying if you need to have Flash look at it.
The problem is that when Flash makes this type of decision, they are not making those aspects of the classes accessible by code directly. The code responsible for actually accomplishing these things is locked in the native code which is built into the FlashPlayer. We're black-boxed out.
Back when Adobe first updated their security model, and in turn broke quite a few running flash based upload services, there was a
pretty
big
stink.
I believe that some people were working around the new limitation by essentially creating a transparent flash movie, and overlaying on top of an otherwise normal HTML element, to 'trick' the user into giving the flash app input from which to trigger the interaction (where they think they are clicking on a simple html button labeled 'upload' they are actually clicking on the invisible flash element sitting on top of it.)
I've not tried this method myself, but it may give you a direction in which to search for a solution that might work for you.
Isn't this the purpose of object and embed tags in html? When you say the whole UI is in javascript I am assuming you are using html markup as well, though I guess this may not necessarily be the case.
How to embed a flash file in html
How to start a flash file with javascript
Ok. I've found this link: Flash Player 10 FileReference Changes. Apparently there's no workaround for this limitation. I guess I'll have to display a prompt for the user from within the flash movie, so that he/she can "interact" and allow to open the dialog.