将HTML内容转换为Canvas图像，主流方法有效防止文本复制

news2025/6/8 22:25:57

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复制回调