0

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

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

（“欺骗下载者”）

它在我的 Wordpress 网站 (v. 3.5.1) 和 FancyBox 插件 (v. 1.3.4) 上运行良好。

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

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

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

>>编辑发布相关代码<<

<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。

4

2 回答 2

0

试试这个：{请注意，任何 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); });
    });
});
于 2013-04-08T14:37:29.313 回答
0

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

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

于 2013-04-08T14:33:43.860 回答