图片防盗链技巧：学会这5招，让JS助力你的网站图片安全无忧

在互联网时代，网站图片的防盗链问题一直是网站管理员和设计师关注的焦点。图片被盗链不仅会损害网站的形象，还可能影响网站的SEO排名。今天，就让我们一起来学习5招利用JavaScript（JS）进行图片防盗链的技巧，让你的网站图片安全无忧。

技巧一：使用Base64编码

Base64编码是一种将二进制数据转换为文本的编码方法。通过将图片转换为Base64编码，你可以在HTML中直接嵌入图片，而不需要使用图片链接。这样，即使有人复制了图片链接，也无法直接访问到原始图片。

// JavaScript代码示例
var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..."
document.body.appendChild(img);

技巧二：设置图片服务器权限

在图片服务器上设置正确的权限，可以防止他人直接访问图片。例如，在Apache服务器上，你可以通过.htaccess文件来设置权限。

<FilesMatch "\.(jpg|jpeg|png|gif)$">
    Order Allow,Deny
    Deny from all
</FilesMatch>

技巧三：使用JavaScript动态加载图片

通过JavaScript动态加载图片，可以防止他人通过查看源代码获取图片链接。以下是一个简单的示例：

// JavaScript代码示例
function loadImages() {
    var img = new Image();
    img.src = "path/to/image.jpg";
    img.onload = function() {
        document.body.appendChild(img);
    };
}
loadImages();

技巧四：利用CDN加速

将图片上传到CDN（内容分发网络）上，可以有效防止图片被盗链。CDN会将图片缓存到全球多个节点，用户访问时直接从最近的节点获取图片，从而降低被盗链的风险。

技巧五：使用图片验证码

在图片上添加验证码，可以防止他人通过爬虫抓取图片。以下是一个简单的验证码图片生成示例：

// JavaScript代码示例
function createCaptcha() {
    var canvas = document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 30;
    var ctx = canvas.getContext('2d');
    ctx.font = '20px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText('ABCD', 10, 20);
    return canvas.toDataURL();
}
document.body.innerHTML = "<img src='" + createCaptcha() + "'>";

通过以上5招，你可以有效地保护你的网站图片，避免被盗链。在实际应用中，可以根据自己的需求选择合适的技巧，或者将多种技巧结合起来，以实现更好的效果。