screenShotPlugin
github地址: https://github.com/likaia/js-screen-shot/tree/master
图片展示

// 截图确认按钮回调函数
const callback = ({ base64, cutInfo }) => {
console.log(base64, cutInfo);
document.querySelector("#img-shot").src = base64;
};
// 截图取消时的回调函数
const closeFn = () => {
console.log("截图窗口关闭");
};
const config = {
enableWebRtc: false, //是否启用webrtc,值为boolean类型,值为false则使用html2canvas来截图
completeCallback: callback,
closeCallback: closeFn,
};
const changeScreenShot = () => {
new screenShotPlugin(config);
};
截图界面显示如下
更换配置
const config = {
enableWebRtc: true,//启用webrtc
wrcWindowMode: true,//启用窗口截图模式,值为boolean类型,默认为false,即当前标签页截图。如果标签页截图的内容有滚动条或者底部有空缺,可以考虑启用此模式。
completeCallback: callback,
closeCallback: closeFn,
};
截图界面显示如下:可以截取其它标签页和窗口,需要用户授权。截图操作稍显卡顿,和pc端截图软件相比,操作不是很流畅。
tesseract.js
github地址:https://github.com/naptha/tesseract.js
https://github.com/naptha/tesseract.js-core
https://github.com/naptha/tessdata 训练数据
采用本地安装的形式,把训练数据和库代码下载到本地,可离线使用
let worker;
(async function init() {
try {
worker = await Tesseract.createWorker("chi_sim", 1, {
workerPath: "../plugins/tesseract.js/worker.min.js",
langPath: "../plugins/tesseract.js/lang",
corePath: "../plugins/tesseract.js-core",
});
console.log("OCR 引擎就绪");
} catch (err) {
console.error("初始化失败:", err);
}
})();
document.getElementById("imageUpload").addEventListener("change", async (e) => {
const file = e.target.files[0];
if (!file) return;
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = '
try {
const {
data: { text },
} = await worker.recognize(file);
resultDiv.innerHTML = `
识别结果:
${text.replaceAll(" ", "").trim()}
`;
} catch (err) {
resultDiv.innerHTML = `
}
});
测试用例
识别结果:中文汉字基本准确,偶尔会有部分汉字识别错误,标点符号会有识别失误,比较容易出现空格问题,因此上面的代码中会替换空格。
截图识别
let worker;
(async function init() {
try {
worker = await Tesseract.createWorker("chi_sim", 1, {
workerPath: "../plugins/tesseract.js/worker.min.js",
langPath: "../plugins/tesseract.js/lang",
corePath: "../plugins/tesseract.js-core",
});
console.log("OCR 引擎就绪");
} catch (err) {
console.error("初始化失败:", err);
}
})();
// 截图确认按钮回调函数
const callback = async ({ base64, cutInfo }) => {
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = '
try {
const {
data: { text },
} = await worker.recognize(base64, {
oem: 1,
psm: 6,
preserve_interword_spaces: "0",
});
resultDiv.innerHTML = `
识别结果:
${text.trim()}
`;
} catch (err) {
resultDiv.innerHTML = `
}
};
// 截图取消时的回调函数
const closeFn = () => {
console.log("截图窗口关闭");
};
const config = {
enableWebRtc: true,
wrcWindowMode: true,
completeCallback: callback,
closeCallback: closeFn,
};
const changeScreenShot = () => {
new screenShotPlugin(config);
};
中英文字符一起识别时中文字符会出现空格问题。