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).
Related
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.
I made a html5 video gallery that is going to be used as a kiosk. I now need it to be viewed in complete full screen mode with no tool bars, similar to when a flash site is in full screen. Is there a way to do this with javascript or jQuery? I was also thinking of calling it from a iframe inside a full screen flash site but dont know if this is possible. Any suggestions will help.
Thanks in advance.
At this time no there is not without having the user press f11. But there is an API in the works that is supposed to make this happen. https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI
Edit (Other options):
If you are wanting to work in kiosk mode then possibly John Kurlak's comment will help if you want to work in IE. Also, you can use add-ons such as https://addons.mozilla.org/en-US/firefox/addon/r-kiosk/?src=search. This way you can turn the browser into a kiosk and not worry about users getting back out.
I do not believe a website can force a page to go fullscreen. You can however have the browser start fullscreened and as long as you do not open a separate window it will remain fullscreened.
Could you not create it in a new window using window.open(), passing in fullscreen=true?
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 search online but can't get satisfactory result
i want to protect images on my website, i know i can disable save as, right click.
the real question is can we Disable Clipboard & Print Screen with JQUERY or java script.
so no image copy from print screen.
thanks
Not from a webpage.
Even if you were able to disable these from within a browser, it will only stop a casual user. If you make a resource available on a public server (as you must in order to let a casual user view it), there really is no way to stop someone from retrieving that resource. After all, you actually want the user to retrieve the resource.
No. I am pretty sure you can't do that. Print screen is a part of the OS, not the browser. I would hope that web sites weren't able to mess with my OS like that.
You can certainly throw roadblocks in front of people trying to download an image, but short of watermarking, there isn't a great way to prevent people from getting your image (that I know of) if you make it available online.
No you can´t. And you can´t disable right click in a bullet proof way either.
The only way to protect your images is by watermark them.
Print Screen is a function of the operating system, and as such, cannot be disable by a webpage.
Actually, you can't disable anything. I know you technically can, but most browsers have an option to not allow disabling of those things. And really, worst case scenario, anyone can view the source of your site and copy the image's url.
In short, don't worry about it so much. Some people will copy your images, but this is nothing new on the internet, so you'll just have to learn to live with it. The only thing that any of your work will do is annoy some people, and make other people have to try a little bit. So, it's really best to not do anything. Place a copyright notice on your site and most people won't try to blatantly steal from you.
The only way to do what you're requesting is to incorporate OS-embedded DRM into your content (think HDCP). This can prevent even screenshots from being done but will severely limit your audience and is an absolutely horrible idea - don't do it!
If you really want to protect your images, the best way to do it is with watermarks and providing very low-quality images on your website and the high-quality stuff in some other way. The watermarks aren't a perfect solution but many consider them good enough.
Well there is no direct way to do that, but I used javascript to hide the content whenever the user hovers outside the website. This forces the user to actually activate your page to be able to see its content. This will activate the javascript that prevents prnt scrn too.
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.