I m designing my portfolio in ruby on rails. In order to restrict the image from being copied, i wanted to disable the right click and other features of copying an image from the website. How to do it?
In most modern browsers you can disable the right-click menu for a particular image. To do so, you can use the event handler oncontextmenu="return false;" within the IMG tag that defines your image:
<IMG border=0 src="..." oncontextmenu="return false;">
For example, the context menu has been disabled for this image:
Note: In older browsers (e.g. Internet Explorer 4.x or earlier) this trick won't work. Also, the context menu will show up if the user has disabled JavaScript.
As all others already said: It's not possible in a reliable way. Only thing you can consider is to watermark your images.
You can disable the right click with javascript.
However, this is a pretty bad idea.
Since your images are sent to the browser of the visitor, they will be accessible, either by displaying the source or analyzing the HTTP requests, in the cache files, or simply screenshoting.
You should not break the user navigation by disabling the right click, your images will be copiable and there's nothing you can do about it. Deal with it.
Sadly its not possible to stop people from copying an image on your page.
Simply disabling right click would not be enough, anyone could just view the source to see the image url
http://www.hypergurl.com/norightclick.html
This guy has mentioned that we can add a transparent gif image to restrict the copy function but i am not getting how to do it. I m displaying my images inside carousel. And carousel gets very tricky sometimes. Also ive uploaded my images in cloudinary so if a person can get the URL of an image then he needs certain parameters to access it which only the owner has.
Related
I'm learning about SEO (Search engine optimization )
I have a website that I created using asp.net everything works just fine but
when I open the page inspector using chrome under network and click on the HTML code I noticed that there is no styling and no images
see picture :
can someone please explain what's the reason for that and what I can do about it?
for example if i inspect the source of SO the page is fully loaded with all the css and images
I tried to google it and I didn't find anything useful
Click on the area circled with red on the image to get all of the resources like styling(CSS), images etc. You can also click on the individual CSS or the Image button to only see styling or images.
missing css file? You may go to CSS blade to see the details. Opening F12 window then refresh your page.
I display the image in my Rails app like this:
= link_to image_tag(image.url), image_path(image.id)
I want to forbid the user to open this image in the new tab.
How do I achieve this?
You have multiple options:-
Disable right click - but users can still get the url of the image through source file.
Set the image as background of an HTML element - but it also has the same limitation as the first problem.
Use image manipulation software such as imagemagik etc to redue size and quality of image.
Add watermarks using image manipulation software like imagemagik.
How to use imagemagik
How to add water marks using imagemagik
There may be many more solutions
This answer is specific to your comment to address copyright issue.
For disabling right click see this page:-
https://www.conceptinfoway.net/disable-right-click-on-particular-element-like-textbox-text-area/
how to block all images in UIWebview like as if you are open
yahoo.com in this website all image content should be block mens user
can not see image.
thanks.
You could run or install some JavaScript which traverses the DOM and hides all images. Or add CSS for image tags to hide them. Or deny any image URL request in the web view delegate. There are a number of possible solutions depending on how the images are loaded and how you can tell what an image actually is.
My upcoming mobile web project requires viewing dynamically chosen pdf files inside the webpage. I am using iFrame to display the pdf file and the file can be scrolled using two-finger scrolling. But the problems I am facing are:
The first page of the file is not displayed completely on the iPad and gets cut off along the width unlike when I view it on the desktop browsers where the first page of the pdf is always entirely displayed although zoomed out to fit in the iFrame area.
There is no visual indication for the users that the pdf document can be scrolled, i.e., there is no scroll bar on the pdf document.
The controls (page navigation, zoom etc.) for the pdf viewer (Adobe reader) don't appear on the document unlike when I see it on the desktop browsers.
What is the best way to achieve what I am trying to do? Do any of you experts know any solutions/workarounds to the problems I am facing? An entirely different approach using anything other than iFrame can also be considered.
The reason why the pdf should be inside the html page is that, the list of pdf files will be on a menu bar on the left side of the page and the user can click on any of them to view on the same page. Ideally, they will have the capability to toggle between full screen view and that view.
Any help is appreciated.
I created a tiny JavaScript module that helps you to show a PDF inline and be able to scroll it. But I also couldn't figure out a way to make it fit the total width of the parent container.
Check it out: https://github.com/williamrjribeiro/ipdf-scroll
Cheers.
I came across this Recommended way to embed PDF in HTML? while researching on the web to find an answer.
The mentioned link discusses about some options that I can use and the google document viewer works for me though don't know if there is anything (like data limit) I need to be aware of before using it on the website. Also I have no idea if it is a good solution (though the full screen mode is not available, but zoom-in/zoom-out and next/prev page buttons are there are show up in the mobile safari on the iPad) to use for an web app that will be run on the iPad.
Anyway, I will keep researching for a better solution and if i don't find any, I'll stick to the google document viewer.
The issue appears to be a bug with Safari on the IPad.
I didn't find a solution for embedding the pdf in html but I did find this:
If you return FileStreamResult from your controller action instead of a view, the pdf will open in a new tab, it's not embedded html but at least your user is not having to download files and open them manually.
I had the same problem of the pdf not being displayed completely. The only thing I found to fix this was the change the size of the div containing the pdf.
For example if the element containing the pdf is a div then I change its width to any value and the rollback to the value it had before. Changing Width or height any one works.
Sometimes I had to wait a little using a setTimeout before calling my resizable method
How does Chrome browser capture a thumbnail image of most visited URLs and show me over a blank page under Most visited??
I am interested in knowing how I would implement it using for my website or an extension.. to take take screenshot.
Lalith
I can only tell you how would I implement it. Once you would go to a site, I will add 1 to a counter if how many times you've entered it. If it's in the top 10, I would also take a screen shot of the site (chrome has a window in the class "Chrome_RenderWidgetHostHWND" which is the window that only contains the site, not the buttons and menus around it).
I can only guess it's not too far from what the guys in Google did.
If you want to write an extension that captures a screenshot of a current site then there is chrome.tabs.captureVisibleTab() method.
I think that it takes a screenshot from the last time you visited the page and saves it in the "Top Sites" SQLite database file that can be found in your profile folder.