将HTML内容转换为Canvas图像，主流实用的方法管用防止文本复制

HTML to Canvas 使用说明

项目概述

此项目实现了将HTML内容转换为Canvas图像的功能，可有效防止文本被复制。适用于需要保护内容的场景，如试题系统、付费内容等。

主要功能

• 防止复制: 将文本内容转换为Canvas图像，使用户无法选择和复制
• MathJax支持: 自动检测数学公式的渲染状态，确保公式完全渲染后再转换
• 内容加密: 使用Base64加密存储原始内容
• 自动检测: 监听DOM变化，自动处理新添加的内容
• Vue集成: 提供Vue指令和插件

如何使用

1. 基本使用

import { convertToCanvas
} from './htmlToCanvas/src/HtmlToCanvas';
// 转换单个元素
const element = document.querySelector('.content-text');
convertToCanvas(element, {
backgroundColor: '#ffffff',
scale: window.devicePixelRatio || 1
});

2. 批量处理

import { checkAndConvertElements
} from './htmlToCanvas/src/HtmlToCanvas';
// 处理多个元素
checkAndConvertElements([
'.question-content',
'.answer-content'
], {
backgroundColor: '#ffffff',
scale: window.devicePixelRatio || 1
});

3. 自动检测和转换

import { startAutoConversion, stopAutoConversion
} from './htmlToCanvas/src/HtmlToCanvas';
// 启动自动转换
const observer = startAutoConversion('.content-text', {
backgroundColor: '#ffffff',
scale: window.devicePixelRatio || 1
});
// 停止自动转换
stopAutoConversion();

4. 与Vue集成

import Vue from 'vue';
import HtmlToCanvasPlugin from './htmlToCanvas/src/vue-plugin';
// 注册插件
Vue.use(HtmlToCanvasPlugin, {
backgroundColor: '#ffffff',
scale: window.devicePixelRatio || 1
});
// 使用指令
<div v-prevent-copy>这段内容将被转换为Canvas<
  /div>
  // 或使用API
  this.$htmlToCanvas.convert('.content-text');
  this.$htmlToCanvas.startAutoConversion('.content-text');

配置选项

选项	类型	默认值	描述
backgroundColor	String	‘#ffffff’	Canvas背景色
scale	Number	devicePixelRatio	缩放比例，影响清晰度
delay	Number	300	转换延迟(毫秒)
onclone	Function	null	DOM复制回调

注意事项

1. 转换后的内容无法进行交互操作，如点击链接
2. 不支持视频、iframe等媒体元素的转换
3. 转换大量内容可能影响性能，建议分批处理
4. 对于数学公式，确保MathJax完全渲染后再转换

示例

项目包含了多个使用示例:

• examples/index.html: 基础功能演示
• examples/vue-example.html: Vue集成示例
• examples/question-search-demo.html: 实际应用场景示例

浏览器兼容性

支持所有现代浏览器:

• Chrome
• Firefox
• Safari
• Edge

不支持IE浏览器。