Question

我们的客户希望阻止从他们的网站保存图片。

除了三星Galaxy 3上的浏览器之外，我已经在所有浏览器上实现了这一功能，尽管图像具有以下CSS属性，但它仍然显示上下文菜单以长时间保存图像：

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

我还尝试使用preventDefault（）拦截touchstart事件，但是如果您尝试滚动时手指在其中一个图像上，则无法滚动页面。

Answer 1

如果在图像上放置透明div或甚至伪元素，则无法轻易地点击或长按图像。

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;
}

这是一个简单的示例：http://jsfiddle.net/JU4A7/

Answer 2

我遇到过这个问题。无论你做什么（通过css或js停止触摸事件，使用遮罩层来吸收事件。等等），当你长按图像时，Galaxy会弹出菜单。

我能想到的唯一方法是使用canvas而不是img。这是代码

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;

我在这里创建了一份备忘录： http://browser.colla.me/show/Galaxy_Android_devices_enables_image_to_be_saved_whatever_you_do

禁用Samsung Galaxy 3上的长按事件

2 个答案: