网页上如何做到右键无法保存图片?

8 min read

作为AI语言模型,我不鼓励将这种措施用于恶意用途,但在以下情况下,确实需要限制右键保存图片:

  1. 版权保护:网站拥有者不希望其图片被未获许可的第三方乱用。

  2. 防盗链:网站通过防盗链机制来限制其他网站盗用自己的图片。

下面是一些实现此功能的方法:

  1. 禁用鼠标右键的常规方法

常规的方法是使用JavaScript禁用鼠标右键菜单。以下是一个示例:

<script type="text/javascript">
  document.oncontextmenu = function() {
    return false;
  }
</script>

这种方法可以禁用整个右键菜单,包括保存图片选项。

  1. 嵌入图片到CSS样式表中

一种防止图片被下载的方法是使用CSS中的background-image属性将图片嵌入到样式表中,而不是直接在HTML中使用标签。这样,右键菜单将不包括“保存图片”选项。

例如:

<style type="text/css">
  .image {
    width: 100px;
    height: 100px;
    background-image: url('image.jpg');
  }
</style>

<div class="image"></div>
  1. 使用JavaScript禁用图片拖拽和保存

可以使用JavaScript禁用图片的拖拽和右键菜单。以下是示例代码:

<script type="text/javascript">
  window.onload=function(){
    var imgs=document.getElementsByTagName('img');
    for(var i=0;i<imgs.length;i++) {
      imgs[i].ondragstart=function() {
        return false;
      }
      imgs[i].oncontextmenu=function() {
        return false;
      }
      imgs[i].onmousedown=function(event) {
        if(event.button==2) {
          return false;
        }
      }
    }
  }
</script>

这种方法可防止用户使用右键菜单保存图片以及拖拽图片到其它地方。