怎么才能让图文不可复制？

要使图文在前端不可复制，可以采取以下几种方法，但需要注意的是，没有绝对安全的防复制方法，有足够技术的决心的人仍然可以绕过这些限制。这些方法主要是增加复制的难度，提升用户体验，而不是提供绝对的保护。

1. CSS 样式控制:

• user-select: none; 这是最常用的方法，可以防止用户选择文本、图片等内容。

.no-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

这个样式需要应用到你想保护的元素上。例如：

<div class="no-select">
  <p>这段文字无法被选中复制。</p>
  <img src="image.jpg" alt="图片" />
</div>

• 针对图片，还可以添加 draggable="false" 属性，防止图片被拖拽。

<img src="image.jpg" alt="图片" draggable="false"/>

2. JavaScript 事件监听:

• 可以使用 JavaScript 监听 copy、cut、contextmenu (右键菜单) 等事件，阻止默认行为。

document.addEventListener('copy', function(e) {
  e.preventDefault();
});
document.addEventListener('cut', function(e) {
  e.preventDefault();
});
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

3. 使用 Canvas 绘制图片:

• 不要直接使用 <img> 标签，而是将图片绘制到 Canvas 上。这样，用户看到的只是 Canvas 的渲染结果，而不是原始图片，从而无法直接复制。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};
img.src = 'image.jpg';

4. 服务端渲染和数据加密:

• 对于敏感信息，最好在服务端进行渲染，并将数据进行加密处理。前端只负责展示解密后的数据，但这需要前后端配合。

5. 添加水印:

• 可以为图片或文字添加水印，即使被复制，也能表明来源。

注意事项:

• 用户体验: 过多的限制可能会影响用户体验，需要权衡利弊。
• 安全性: 前端的防复制方法只能增加复制的难度，并不能完全阻止 determined 的用户复制内容。 真正的安全措施应该在后端实现。
• 开发者工具: 用户可以使用开发者工具绕过前端的限制，例如禁用 JavaScript、查看源代码等。

总而言之，要根据实际需求选择合适的防复制方法。 如果只是想简单的阻止普通用户的复制行为，CSS 样式控制就足够了。 如果需要更高的安全性，则需要结合多种方法，并在后端采取相应的措施。