A friend of mine asked me if it is possible to "make something" to avoid someone stealing her photos from her blog posts. I told her that we can try some options but at the end there's always a way to get the pictures, and that some people even take screen shots so they can have the images.
Then I asked myself if the screen capture exists as an event so you can catch it using js/jQuery and hide the image. I have searched for a while now but still can't find an answer.
Is this possible?
Find out in the ASCII table which is the screenshot key on the keyboard, capture it via javascript and return false.
That is a way to do it, but in the end, there is always a way to bypass that. There is even software to take those screenshots.
For example on windows 8, if you press the Windows key plus the print screen, it will automatically save the screenshot on a folder inside your pictures folder.
It's pretty much a lost battle.
No, it's not possible because a screen capture event belongs to the OS, not to the browser so JavaScript wouldn't be aware of it. What you could be able to do is detect the key strokes associated to the screen capture and hiding the image if it happens.
It's still trivial, because anyone could take a picture to the monitor screen.
As the other answered, it's pretty impossible to avoid that: if something is on a computer's screen, then it is on that computer, somehow. At last, you can always take a screnshot of the screen.
The only solution, if possible, would be to use a watermark.
Related
I want to create a bookmarklet that I can drop on my browser's bookmark toolbar which, when clicked, inserts a fixed, predefined text (in my use case, a shruggie: ¯\_(ツ)_/¯ ) at the current cursor position (assuming that the cursor is in an editable input field or textarea). However, I am a beginner at JavaScript, and can't figure out how to get started doing this. Any help? If I can get a pointer in the right direction, I can probably figure it out from there. Thanks!
Apologies for the delay; life threw a few curveballs at me right about the time I posted the question, and I forgot about this until StackOverflow notified me of the responses tonight.
The comment by afuous gave me everything I was looking for, and I now have a working bookmarklet. For anyone else who comes across this, here it is:
javascript:(function(a){a.value=a.value.slice(0,a.selectionStart)+"%C2%AF\\_(%E3%83%84)_/%C2%AF"+a.value.slice(a.selectionEnd);})(document.activeElement);
Or, as JavaScript that hasn't been converted to bookmarklet form:
(function (a) {
a.value =
a.value.slice(0, a.selectionStart) +
"¯\\_(ツ)_/¯" +
a.value.slice(a.selectionEnd);
})(document.activeElement);
This has the benefit of allowing for me to select a portion of a text and use the bookmarklet to replace the selection with a shruggie, as if I had hit a hypothetical shruggie key on the keyboard.
Feel free to steal and modify as you see fit. This has been tested only in Firefox 50.0.2, but I think it should work in all modern browsers. (It won't work in Internet Explorer 8 or earlier.)
CSS Tricks has an article that explains how to do that and more. I'm well aware link only answers are less than ideal here, however the question is asking for pointers in the right direction, so I believe its a good fit.
The bookmarklet from the tutorial prefills forms, so essentially you are going to want to gut it, but first peek into how it is finding form controls and prefilling them. Then tweak to fit your desired functionality, and finally rip everything else out that you do not need or use.
Prefilling Forms Custom Bookmarklet
There is an idea which I have been toying with for the past few weeks. I am extremely serious to realise this concept, but I totally lack any know how about the implementation. I have some thoughts which I'll be sharing as I explain what the idea is.
We have websites. Most of them are responsive.
What is responsive web design?
By and large, responsive web design means that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation. If I change my window size, my website to should change its dimensions accordingly.
If I scale some object on the screen, then the website should rearrange/ rescale accordingly.
This is good, but nothing exciting (nowadays!).
I am again so damnfully limited by a screen and to whatever happening inside it that what I do outside seems still very external and not seamless. Except my contact with the mouse/ keyboard, I do not know any other way to communicate with the things that happen inside the screen. My screen experience is still a very external feature, not seamless with my cognition. I think this is also a reason why my computer always remains a computer and does not behave a natural extension of the human body.
I was toying with a idea which I have no clue how to realize. I have a basic idea, but I need some some technical/ design help from those who are fascinated by this as much as I am.
The idea is simple: Make the screen more responsive, but this time without use of a mouse or any such input device. All laptops and most desktops have a microphone. How about using this small device for input?
Let me explain:
Imagine, a website in which screen icons repopulate when you blow a whiff onto the screen. The song on your favourite playlist changes when you whistle to the screen.
Say you have an animated tree on the screen. That tree sheds its leaves when you blow air to it. The shedding depends on how fast you blow. Getting a small idea?
Let me put some graphics (see the hyperlink after this paragraph) which I think will make it better. I plan to make a website/ API in which there is a person with long hair staring at you. If you blow air from the right side of your screen, her hair moves to the left. If you blow air from the left, her hair blows to the right. If you blow faint, her hair suffers faint scattering. Some naughty stuff, say you whistle: The character on the screen winks, or say throws a disgusting expression- whatever.
The whole concept is that every element of the web must have a direct relation with the user who is sitting outside the screen. It gives a whole lot of realism to the website architecture if things like my whistle, whiff or say even my sneeze can do something to the website! I am not tied to the mouse or the keyboard for my response to be noted. Doesn’t that reduce a hell of a lot of cognitive load on the user?
See this image: http://imgur.com/mg4Whua
Now coming to the technical aspect that I need guidance on.
If I was building a regular responsive website in JavaScript, I'd use addeventhandler("Click", Animate) or addeventhandler("resize", Animate) - something like that. Here I want my event handler to be the audio input that is coming from the microphone. Also, I need to know the place from where the audio is originating that I can decide which side the hair must fall and play that animation.
So in the span of 180/360 degree of the microphone, I need to not just catch the audio, but also its angle that the right animation can be played. It'd be a crashing fail if the same animation is played where-ever I blow air. It needs to have that element of realism.
I have asked around and some people suggested to me that I try WebRTC of HTML5. I am still seeing if that works, but otherwise are there any more options? I guess Processing is one. Has anyone handled its audio features?
I want to build a simple prototype first before I delve into the immense possibilities this idea could have. But if you have some really awesome thing in mind, please let me know about it. Exciting ideas are one thing, and exciting implementation totally another. We want both.
Are there such websites already? Any work happening in this side?
Any small guidance counts!
There are plenty of ways to create your own events. Most libraries have some built-in way of doing so. Basically you're talking about the observer pattern and here's a nice article to explain it in greater detail: https://dottedsquirrel.com/javascript/observer-pattern/
Also as far as listening to audio goes, using an analyzer-node (AnalyserNode) on the input signal and some ingenious code to determine that the sound is what you want to listen to, firing the event is a piece of cake using aforementioned custom events.
But, before diving into those, determining the angle of the sound? I do not think that is even possible. You might be able to determine the angle of the origin of the sound in a '2d' scope, but that certainly won't give you an angle. I think you'd need something rather more ingenious than a simple stereo mic setup to determine the angle.
I have an app on the iphone which will display on the screen an html file containing text and an image. I manipulate this html file with javascript and when I'm done I would like the user to be able to take a screen shot but would like it to be done automatically, without pressing the home and power buttons. Is the some javascript or jQuery that, once the final screen is displayed on the phone, automatically takes a screen shot and places it into the photo library on the phone? Thanks.
Short answer: No. Longer answer: Kinda, but not really.
As far as I know, you cannot make iOS take a screenshot nor even download an image through Javascript or similar. However, I guess you could try to draw the DOM in a canvas and then use canvas.toDataURL() (link) to convert it into an image. You could then instruct the user to hold down their finger on the image to bring up the save dialogue and save it to their device.
As I said, not really a pretty solution, but perhaps something you could experiment with if you really need this feature.
Edit: I did a fast Google search and found this javascript library that should make it a bit easier to do what I described above.
I have a form with a upload photo input on it. I wanted to have it so that people clicked an image and the browse folder dialog box would come up. So off I went this morning looking for how to do this.
So now I know that for security reasons this isn't as easy as I might have hoped. However, apparently you can make an image which is about the same size and the input field would be, set it at the same position as the input and set the inputs opacity to zero.
That's all very nice but there's an issue in IE7 where you can type directly into the text field of a file input. Also you're limited to having an image which is the same size as those inputs.
I was excited to find another solution which using the same idea you can have an image of any size and then with JavaScript make it so that the browse button appears (invisibly) behind the mouse pointer whenever the user mouses over the image.
However, I've just found out this solution doesn't work for Opera. And I've no idea why.
I've been at this all day and can't think of any other words to Google about this. Can anyone tell me how to fix this for opera or even if there's a similar solution (where you can have an image 95x95px) around?
I would look in to uploadify. It's probably a little over-the-top for such a "simple" task, but it gives you all those freedoms and more (like multiple file upload ability if that matters).
The hard part is that the only real standard every browser agreed on, with regards to file uploads, is they need to click something, select a file, and have it upload on submit. Beyond that (size, color, method, etc.) is really on the browser developers.
The other thing you may be able to do is make the code browser-based. If it works (via the second method) on everything but opera, may want to stick with it then have JS intervene and default to the 0% opacity method when it is opera).
Unfortunately, I don't know what other options you have though.
This question already has answers here:
Preventing a visitor from saving an image from my site
(15 answers)
Closed 8 years ago.
I have a website where I display digital proofs for clients of professional photographers. I would like to include an option of 'zooming' into the full resolution version of the image, but it is absolutely imperative that it be practically impossible for the end user to reconstruct and save/print the image.
Obviously simply disabling right clicking is out, as the user could simply dig up the image in the cache. Breaking the image into tiles, then reconstructing them via javascript has merit; the user could still dig up the tiles and put them together in Photoshop, but is that practical for them? That's up for debate. I was also wandering today if the image couldn't be read, sent as a character string of pixel color values, and then constructed on the client side using an absolutely positioned element for each pixel.
But my potential solutions seem to be getting more and more ridiculously convoluted. And I'd like something that's been tested and shown to be scalable. I can't possibly be the first to deal with this problem. Is there something else out there that I don't know about? What is the standard, accepted way to do this?
As an aside, I am aware that I will want to make the image data unavailable to external http requests. I would plan to have ColdFusion read the image file on demand and stream it to the client.
Thanks!
No matter what you do, someone could always screen capture the page. Keep a watermark on the full resolution image.
With 100% reliability, no. For an image to be displayed, it has to be downloaded onto the client's browser, and therefore CAN be retrieved.
You can make it harder for them to extract the image through various techniques, but none of them make it impossible - if nothing else, they can always just make a screen capture:
slice/dice the image into multiple pices and use table-based layouts to make it appear as a single image
javascript right-click disablers
various cache headers to try and prevent client-side cacheing
CSS overlays to try and prevent right-click->save as on the image itself
display in a Flash/Java app
etc... etc...
None are 100% reliable, and are all trivial to bypass by a determined (and even slightly knowledgeable) user.
You can't, unless you sell specific hardware, even then people can put a camera in front screen and take pictures
You can water mark your images
You can actively sue who ever steals your pictures (that is in reference to how others solve this).
Nicholas,
As you pointed, there is no protection against Print Screen.
I would suggest you to implement the media protection of sites like Image Bank (http://www.gettyimages.com), but is mostly based in NOT displaying full resolution images and heavy watermarking ...
I don't think there is a practical solution to your problem (if any).
Good luck!