前端如何实现图片伪防盗链，保护页面图片

在用户请求图片时，可以在前端生成一个包含时间戳的 token，然后将其附加到图片 URL 中。这个 token 可以在服务器端验证。

前端代码示例（使用 JavaScript）：

// 生成当前时间戳作为 token
function generateToken() {
return Date.now();

}

// 获取图片 URL
function getImageUrl() {
const token = generateToken();
return `https://example.com/images/photo.jpg?token=${token}`;

}

// 设置图片 src
document.getElementById('image').src = getImageUrl();

解释：

• 
  
• generateToken() 函数生成一个时间戳作为 token。
  
• getImageUrl() 函数将 token 附加到图片 URL 中，以便进行验证。
  

在图片加载时，确保 URL 中包含有效的 token。前端可以在页面加载时动态设置图片 URL。

前端代码示例（使用 Vue.js）：

<template>
<img :src="imageUrl" alt="Protected Image" />
</template>

<script>
export default {
data() {
return {
imageUrl: ''

    };

  },
methods: {
generateToken() {
return Date.now(); // 或使用其他方法生成 token

    }

  },
created() {
const token = this.generateToken();
this.imageUrl = `https://example.com/images/photo.jpg?token=${token}`;

  }

};
</script>

解释：

• 
  
• 使用 Vue 的生命周期钩子 created 来生成 token 并设置图片 URL。
  

在前端，你可以通过 CSS 或 JavaScript 来禁用图片的右键菜单，从而防止用户通过右键菜单下载图片。

前端代码示例（使用 CSS）：

<style>
.no-right-click {
pointer-events: none;

}
</style>

<img class="no-right-click" src="https://example.com/images/photo.jpg" alt="Protected Image" />

前端代码示例（使用 JavaScript）：

document.addEventListener('contextmenu', function (e) {
if (e.target.tagName === 'IMG') {

        e.preventDefault();

    }

});

解释：

• 
  
• 使用 CSS 属性 pointer-events: none 来禁用右键菜单。
  
• 使用 JavaScript 事件监听器来阻止右键菜单弹出。
  

在图片上添加水印是另一种保护图片的方式。前端可以通过 Canvas 绘制水印，但通常这在图片生成或处理阶段进行更为合适。

前端代码示例（使用 Canvas）：

<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();


  img.src = 'https://example.com/images/photo.jpg';

  img.onload = function() {

    ctx.drawImage(img, 0, 0);

    ctx.font = '30px Arial';

    ctx.fillStyle = 'red';

    ctx.fillText('Watermark', 10, 50);

  };
</script>

解释：

• 
  
• 使用 Canvas 绘制图片并添加水印文本。
  

在前端代码中，可以通过设置 Referer 头（这通常由浏览器自动处理）来帮助服务器验证请求来源。

前端代码示例（使用 Fetch API）：

fetch('https://example.com/images/photo.jpg', {
method: 'GET',
headers: {
'Referer': 'https://yourwebsite.com'

  }

}).then(response => response.blob())

  .then(blob => {
const url = URL.createObjectURL(blob);
document.getElementById('image').src = url;

  });

解释：

• 
  
• 使用 fetch 请求图片，手动设置 Referer 头部（尽管大多数浏览器自动设置）。