H5如何禁止用户文字或者图片？

在前端开发中，如果你想禁止用户复制页面上的文字或者保存图片，可以采取一些技术手段来增加难度，但请注意，这些方法并不是绝对的安全措施，因为用户仍然可以通过其他手段（如查看页面源代码或使用屏幕截图工具）来获取这些内容。以下是一些建议的方法：

禁止复制文字

1. 使用CSS：

   • 通过设置user-select: none;来禁止用户选择文本。

   body {
     -webkit-user-select: none; /* Chrome, Safari, Android */
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* IE10+/Edge */
     user-select: none; /* 标准语法 */
   }
   

2. 使用JavaScript：

   • 监听copy事件，并阻止其默认行为。

   document.addEventListener('copy', function(e) {
     e.preventDefault(); // 阻止复制行为
   });
   

禁止保存图片

1. 使用CSS：

   • 通过设置背景图像并使用pointer-events: none;来阻止用户与图像交互。

   .image-container {
     background-image: url('your-image.jpg');
     pointer-events: none; /* 阻止鼠标事件 */
   }
   

2. 使用JavaScript：

   • 监听图像的右键点击事件，并阻止其默认行为，以防止用户保存图像。

   document.querySelectorAll('img').forEach(function(img) {
     img.addEventListener('contextmenu', function(e) {
       e.preventDefault(); // 阻止右键菜单显示
     });
   });
   

3. 使用Canvas：

   • 将图像绘制到Canvas上，并以Canvas的方式呈现，这样用户就无法直接获取到原始图像文件。但请注意，这仍然可以通过Canvas的API被提取。

4. 水印或切片：

   • 在图片上添加水印可以降低图片被无授权使用的风险。
   • 将图片切分成多个小片，并在前端通过CSS或JavaScript重新组合，增加用户获取完整图片的难度。

5. 服务端控制：

   • 通过服务器端的权限控制来保护图片资源，例如验证请求的来源、频率或用户身份。

6. 使用WebP或其他非标准格式：

   • 使用不常见的图像格式可以增加用户处理的难度，尤其是当这些格式不被所有软件广泛支持时。

请记住，以上方法只能提高用户获取内容的难度，并不能完全阻止有决心的用户。在设计系统时，应该综合考虑用户体验和版权保护的需求，并可能需要在技术和法律层面采取综合措施来保护内容。