Question

我发现这个jQuery解决方案可以在真实图像上自动覆盖透明gif。

http://www.dwuser.com/education/content/stop-the-thieves-strategies-to-protect-your-images/

（“欺骗下载者”）

使用FancyBox插件（v.3.3.4）在我的Wordpress网站（v.3.5.1）上运行正常。

但现在我所有与图片相关的链接都消失了......

是否有任何解决方案可以保持与图像相关的活动链接？

我还尝试将叠加gif仅归因于fancybox框架内的图像，但没有成功......

＆gt;＆gt;编辑发布相关代码＆lt;＆lt;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var pixelSource = 'http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif';
    var useOnAllImages = true;
    // Preload the pixel
    var preload = new Image();
    preload.src = pixelSource;
    $('img').live('mouseenter touchstart', function(e) {
        // Only execute if this is not an overlay or skipped
        var img = $(this);
        if (img.hasClass('protectionOverlay')) return;
        if (!useOnAllImages && !img.hasClass('protectMe')) return;
        // Get the real image's position, add an overlay
        var pos = img.offset();
        var overlay = $('<img class="protectionOverlay" src="' + pixelSource + '" width="' + img.width() + '" height="' + img.height() + '" />').css({position: 'absolute', zIndex: 9999999, left: pos.left, top: pos.top}).appendTo('body').bind('mouseleave', function() {
            setTimeout(function(){ overlay.remove(); }, 0, $(this));
        });
        if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); });
    });
});
</script>

谢谢，抱歉我的英语不好。 d。

Answer 1

在图片上添加水印是一种选择吗？在图像上放置gif时，可以使用鼠标右键阻止保存图像。但是使用Firefox，您可以在任何地方右键单击并选择“查看页面信息”，然后从那里选择标签媒体，您仍然可以下载图像。

PS：或者禁用JS的人也可以下载图像。

Answer 2

试试这个：{只要知道任何javascript保护对经验丰富的开发人员都没用}

$(function() {
    var pixelSource = 'http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif';
    var useOnAllImages = true;
    // Preload the pixel
    var preload = new Image();
    preload.src = pixelSource;
    //live is deprecated, use 'on' instead
    $(document).on('mouseenter touchstart','img', function(e) {
        // Only execute if this is not an overlay or skipped
        var img = $(this);
        if (img.hasClass('protectionOverlay')) return;
        if (!useOnAllImages && !img.hasClass('protectMe')) return;
        // Get the real image's position, add an overlay
        var pos = img.offset();
        var overlay = $('<img class="protectionOverlay" src="' + pixelSource + '" width="' + img.width() + '" height="' + img.height() + '" />').css({position: 'absolute', zIndex: 9999999, left: pos.left, top: pos.top}).appendTo('body').bind('mouseleave', function() {
            setTimeout(function(){ overlay.remove(); }, 0, $(this));
        }).click(function(){
           if(img.parent('a').length)//assuming your image is embeded in a link tag
              window.location.replace(img.parent('a').attr('href'));
        });
        if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); });
    });
});

自动将透明gif覆盖在Fancybox框架内的真实图像上

2 个答案: