-2

A client of ours would like to prevent saving images from their website.

I've implemented this across all browsers aside from the browser on the Samsung Galaxy 3 which still displays the context menu to save an image on a long press, despite the image having these CSS properties:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

I also tried intercepting the touchstart event with preventDefault() which worked, but then you can't scroll the page if your finger is on one of the images as you try to scroll.

Chris
  • 355
  • 1
  • 8
  • 2
    Have you told your client that this is easily circumvented? –  Jun 12 '14 at 07:33
  • you might find an answer here: http://stackoverflow.com/questions/3413683/disabling-the-context-menu-on-long-taps-on-android – BrendanMullins Jun 12 '14 at 07:34
  • 1
    If you can see the image, you can copy it. If you don't want the user to save an image, don't put the site online... – Nick R Jun 12 '14 at 08:37
  • @MikeW - thanks, yes. They just want to make it as difficult as possible for the 'average' user. – Chris Jun 12 '14 at 23:40
  • @BrendanMullins - Thanks Brendan, yes I have, and unfortunately this has the problem I mentioned where you then aren't able to scroll the page when touching one of the images. – Chris Jun 12 '14 at 23:48
  • @NickR - Thanks for explaining how the internet works. – Chris Jun 12 '14 at 23:49

2 Answers2

0

If you put a transparent div or even a pseudo element over the image you can't right click or long-tap the image easily.

the HTML:

<div class="image-wrap">
    <img src="dontCoppyThisImage.jpg" />
</div>

css:

.image-wrap {
    position: relative;
}
.image-wrap:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

here is a quick example: http://jsfiddle.net/JU4A7/

BrendanMullins
  • 587
  • 3
  • 18
  • Hey Brendan, just tried this fiddle using the Samsung and I'm still able to save the image unfortunately. – Chris Jun 19 '14 at 06:40
0

I've came across this problem. no matter what you do(stop touch events by css or js, use a mask layer to absorb event .etc.), Galaxy just pops up the menu when you long press on the image.

the only way I can think of is using canvas instead of img. here is the code

var $canvas = $('<canvas ></canvas>');
var img = new Image();

$body.append($canvas);

img.onload = function(){
    $canvas[0].width = img.width;
    $canvas[0].height = img.height;
    $canvas[0].getContext('2d').drawImage(img, 0, 0, img.width, img.height);
}
img.src = src;

I've created a memo here: http://browser.colla.me/show/Galaxy_Android_devices_enables_image_to_be_saved_whatever_you_do

sunderls
  • 760
  • 7
  • 8