你知道什么是图片防盗链吗？防盗链怎么实现呢？说说你的方法

我知道图片防盗链。它是指防止其他网站未经授权盗用本站图片资源的一种技术。盗链会导致本站服务器流量和带宽资源被消耗，增加服务器负担，甚至影响网站正常运行。

前端开发实现图片防盗链的方法比较有限，效果也比较弱，主要在于增加盗链难度，而非完全阻止。真正的防盗链需要后端配合实现。以下是一些前端可以尝试的方法：

1. Referer 检查 (不推荐)

原理：通过检查 HTTP 请求头中的 Referer 字段来判断请求来源。如果 Referer 不是本站域名，则认为是盗链。

缺点：

Referer 可以被伪造，很容易绕过。
部分浏览器或插件会出于隐私保护的目的移除 Referer，导致正常访问也被拦截。
使用代理服务器访问时，Referer 会变成代理服务器的地址。

实现 (仅作演示，不推荐使用):

<img src="your-image.jpg" onerror="this.src='placeholder.jpg';">

这段代码会在图片加载失败时（例如 Referer 校验不通过导致 403 错误），将图片替换为预设的 placeholder 图片。但这并不能阻止盗链，只是在盗链发生时显示一个替代图片。

2. 图片添加水印

原理：在图片上添加网站 logo 或其他标识作为水印，即使被盗链，也能起到宣传作用。

缺点：

影响用户体验。
水印可以被去除，需要复杂的水印策略才能有一定效果。

实现：前端实现比较复杂，通常需要 canvas 或 SVG 等技术进行处理，或者使用现成的水印库。更推荐在后端生成带水印的图片。

3. 使用 Data URL

原理：将图片转换为 Base64 编码的 Data URL，直接嵌入到 HTML 中。

缺点：

增加 HTML 文件大小，影响页面加载速度。
不适合大图片。
无法利用浏览器缓存。
仍然可以被复制粘贴。

实现：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

4. 使用 canvas 绘制图片 (有一定效果)

原理：通过 canvas 将图片绘制出来，增加盗链者获取原始图片链接的难度。

缺点：

增加了前端的计算量，影响性能。
仍然可以被截图。
需要处理跨域问题。

实现：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = 'anonymous'; // 处理跨域
img.onload = () => {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  document.body.appendChild(canvas);
};
img.src = 'your-image.jpg';