当前位置：首页 > article >正文

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

article 2025/8/14 20:27:52

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