正文

学会js技巧轻松防止图片被下载，保护你的原创内容

/0 浏览量
1108

在数字化时代，原创内容的保护显得尤为重要。图片作为网络内容的重要组成部分，其版权保护一直是创作者关心的问题。今天，我们就来探讨如何利用JavaScript（JS）技巧来防止图片被下载，从而保护你的原创内容。

图片嵌入与引用

在网页中嵌入图片时，通常有几种方式：

  1. 直接引用本地图片：使用<img>标签的src属性直接引用本地图片路径。
  2. 引用外部图片：使用<img>标签的src属性引用网络上的图片。

对于直接引用本地图片，可以通过以下方式来防止用户下载：

使用CSS来隐藏图片

.hidden-image {
    display: none;
}

在HTML中：

<img src="your-image.jpg" class="hidden-image">

这样，图片虽然被嵌入到页面中，但用户无法看到也无法下载。

设置图片不可见

使用JavaScript，可以设置图片不可见：

document.addEventListener("DOMContentLoaded", function() {
    var img = document.querySelector("img");
    img.style.visibility = "hidden";
});

使用JavaScript防止图片被下载

  1. 图片懒加载：图片懒加载是一种性能优化的技术，它可以让图片在滚动到视窗内时才开始加载。这样，图片不会被直接展示在页面上，也就无法被下载。
document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // Fallback for browsers that don't support IntersectionObserver
        lazyImages.forEach(function(lazyImage) {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.classList.remove("lazy");
        });
    }
});
  1. 重定向到服务器：在服务器端，可以将图片请求重定向到其他路径，比如一个JavaScript文件，该文件负责生成一个不可下载的图片版本。
// 假设图片的URL是 /path/to/image.jpg
var imgSrc = "/path/to/image.jpg";
var xhr = new XMLHttpRequest();
xhr.open("GET", imgSrc, true);
xhr.responseType = "blob";
xhr.onload = function() {
    if (this.status === 200) {
        var url = URL.createObjectURL(this.response);
        var img = document.createElement("img");
        img.src = url;
        img.onload = function() {
            URL.revokeObjectURL(url);
        };
        document.body.appendChild(img);
    }
};
xhr.send();
  1. 使用Canvas生成图片：通过JavaScript的Canvas API，可以生成一个图片的Canvas副本，并在Canvas上进行修改，使其不可下载。
var img = new Image();
img.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    ctx.font = "48px Arial";
    ctx.fillStyle = "red";
    ctx.fillText("COPyRiGHT", 0, canvas.height - 24);
    var dataUrl = canvas.toDataURL();
    var img2 = document.createElement("img");
    img2.src = dataUrl;
    document.body.appendChild(img2);
};
img.src = "your-image.jpg";

通过上述方法，可以在一定程度上防止用户下载你的图片。然而，需要注意的是，没有任何方法可以完全防止有技术的用户下载图片。因此，除了使用技术手段外，还应该结合版权声明、水印等方式来保护你的原创内容。

-- 展开阅读全文 --