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>
安全性提升
在上面的JavaScript源码中，可以看出哪些文字被转化成为了图片，为了防止源码分析进而被反制，可以用JShaman进行JavaScript源代码混淆加密，加密后的代码中文字等关键信息可以被隐藏。