用JavaScript实现：网页内容防复制

最新推荐文章于 2023-04-24 17:57:46 发布

w2sfot

最新推荐文章于 2023-04-24 17:57:46 发布

阅读量476

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/w2sft/article/details/129535437

版权

文章介绍了如何使用JavaScript将网页文字转换为canvas元素来防止内容被复制。通过在指定文字容器中创建canvas并绘制文字，实现文字与图片的组合，达到防复制的效果。同时提到了使用JShaman进行JavaScript源代码混淆加密，以增加安全性。

摘要由CSDN通过智能技术生成

JavaScript奇技淫巧：网页内容防复制

很多时候，我们不希望自己网页上的内容被复制，比如原创内容、小说、文章等等。

在网页前端，使用JavaScript编程，似乎有不少防复制方法，比如：禁用copy事件、禁止鼠标右键菜单，等等。

但本文要介绍的，不是这些常用的方法，而是把文字变成canvas画布，画出的文字是不能被复制的。

效果展示

如下图所示，从网页中复制文件时，其中有些字是无法选中的。

复制后再粘贴，会发现缺失了一些文字：

技术原理

在指定的文字容器中，将某些文字转化成大小与文字相同的canvas（画布），并将文字画在canvas上，形成了文字+图片的组合。如此，选择文字时，图片无法选中，便实现了防复制的效果。

源码

<html>
<body>
<p id="p1">
JShaman是专业的JavaScript代码混淆平台，用于JS加密、JS混淆。<br>
</p>
<script>
//将指定文字换成canvas
function word_2_canvas(target, word,index){
var c1 = document.createElement("canvas");
//Canvas的大小
c1.width = 20;
c1.height = 20;
c1.id = "c"+index;
document.body.appendChild(c1);
var t1 = document.getElementById("c"+index).outerHTML;
c1.id = "";
document.getElementById(target).innerHTML = document.getElementById(target).innerHTML.replace(word, t1)
}
//以canvas上画出文字
function vanvas_fill_word(word,index){
var c2;
c2 = document.getElementById("c"+index).getContext("2d");
//字体和大小
c2.font = '16px Microsoft YaHei';
//在Canvas上绘制文本
c2.fillText(word, 1, 18);
}
word_2_canvas("p1","淆",1);
word_2_canvas("p1","加",2);
word_2_canvas("p1","台",3);
vanvas_fill_word("淆",1);
vanvas_fill_word("加",2);
vanvas_fill_word("台",3);

</script>
</body>
</html>