tools/scan-code-jssdk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
iqudoo
2026-05-01 23:10:19 +08:00
parent c0fba11103
commit 4e41a85e04
8 changed files with 58 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -83,6 +83,7 @@ interface ScanConfigOptions {
webScanEnabled?: boolean, webScanEnabled?: boolean,
webScanCanvasEnabled?: boolean; webScanCanvasEnabled?: boolean;
webScanCanvasStyle?: string; webScanCanvasStyle?: string;
webScanCloseButtonStyle?: string;
webScanType?: ("qrCode" | "barCode")[]; webScanType?: ("qrCode" | "barCode")[];
webScanVideoMirror?: boolean; webScanVideoMirror?: boolean;
webScanVideoMirrorVertical?: boolean; webScanVideoMirrorVertical?: boolean;
@@ -111,6 +112,7 @@ interface ScanConfigOptions {
| `webScanEnabled` | 是否支持 WebScan 扫码 | `true` | | `webScanEnabled` | 是否支持 WebScan 扫码 | `true` |
| `webScanCanvasEnabled` | 是否显示 WebScan 扫码 canvas；关闭后仍会用隐藏 canvas 识别 | `true` | | `webScanCanvasEnabled` | 是否显示 WebScan 扫码 canvas；关闭后仍会用隐藏 canvas 识别 | `true` |
| `webScanCanvasStyle` | WebScan 扫码 canvas 样式 | `position: fixed; width: 300px; height: 300px; top: 0; left: 0; z-index: 9999;` | | `webScanCanvasStyle` | WebScan 扫码 canvas 样式 | `position: fixed; width: 300px; height: 300px; top: 0; left: 0; z-index: 9999;` |
| `webScanCloseButtonStyle` | WebScan 扫码 canvas 关闭按钮样式 | 显示在 canvas 右上角 |
| `webScanType` | WebScan 扫码类型 | `["qrCode", "barCode"]` | | `webScanType` | WebScan 扫码类型 | `["qrCode", "barCode"]` |
| `webScanVideoMirror` | WebScan 视频是否水平镜像；不配置时自动判断：前置/PC 镜像，后置不镜像 | 自动 | | `webScanVideoMirror` | WebScan 视频是否水平镜像；不配置时自动判断：前置/PC 镜像，后置不镜像 | 自动 |
| `webScanVideoMirrorVertical` | WebScan 视频是否垂直镜像 | `false` | | `webScanVideoMirrorVertical` | WebScan 视频是否垂直镜像 | `false` |

2
demo.html
View File

@@ -229,6 +229,7 @@
<pre>IScan.config({ <pre>IScan.config({
webScanEnabled: true, webScanEnabled: true,
webScanCanvasEnabled: true, webScanCanvasEnabled: true,
webScanCloseButtonStyle: "background: rgba(27, 99, 244, 0.88);",
webScanBeepEnabled: true, webScanBeepEnabled: true,
initWechatJssdk: { initWechatJssdk: {
apiUrl: "https://your-domain.com/wechat/jssdk-config" apiUrl: "https://your-domain.com/wechat/jssdk-config"
@@ -319,6 +320,7 @@ IScan.stopScan();</pre>
var url = "https://vet.iqudoo.com/api?action=api.biz.wechat.JSSDKConfig"; var url = "https://vet.iqudoo.com/api?action=api.biz.wechat.JSSDKConfig";
initSDK({ initSDK({
webScanCanvasEnabled: true, webScanCanvasEnabled: true,
webScanCloseButtonStyle: "background: rgba(27, 99, 244, 0.88);",
webScanBeepEnabled: true, webScanBeepEnabled: true,
initWechatJssdk: { apiUrl: url } initWechatJssdk: { apiUrl: url }
}, function () { }, function () {

4
dist/index.d.ts vendored
View File

@@ -45,6 +45,10 @@ interface ScanConfigOptions {
* 网页扫码canvas样式，默认：position: fixed; width: 300px; height: 300px; top: 0; left: 0; z-index: 9999; * 网页扫码canvas样式，默认：position: fixed; width: 300px; height: 300px; top: 0; left: 0; z-index: 9999;
*/ */
webScanCanvasStyle?: string, webScanCanvasStyle?: string,
/**
* 网页扫码canvas关闭按钮样式，默认显示在canvas右上角
*/
webScanCloseButtonStyle?: string,
/** /**
* 网页扫码类型，默认支持二维码和条码 * 网页扫码类型，默认支持二维码和条码
*/ */

2
dist/index.html vendored
View File

@@ -164,6 +164,7 @@
}</style></head><body><main class="page"><section class="hero"><h1>IScan 通用扫码SDK</h1><p>统一接入桥接扫码、微信小程序、微信 JSSDK 扫码、Web 摄像头扫码、图片识别和扫码枪输入。</p></section><section class="grid"><div class="card"><h2>功能说明</h2><ul class="feature-list"><li>支持桥接扫码、微信 JSSDK 扫码、Web 摄像头扫码、图片识别和扫码枪输入。</li><li>浏览器环境使用WASM库识别二维码和条形码。</li><li>扫码结果由监听规则统一回调，支持正则匹配和优先级排序。</li></ul></div><div class="card"><h2>当前状态</h2><p>SDK 状态：<span id="status" class="status">loading</span></p><p>运行环境：</p><pre id="output" class="panel"></pre></div></section><section class="card"><h2>操作</h2><p>点击开始后，会按桥接、微信、Web 摄像头、图片识别的顺序选择可用扫码方式。</p><div class="actions"><button onclick="startScan()" class="btn">开始扫码</button> <button onclick="scanVideo()" class="btn secondary">开启视频扫码</button> <button onclick="scanImage()" class="btn secondary">选择图片识别</button> <button onclick="stopScan()" class="btn secondary">停止扫码</button></div></section><section class="card"><h2>扫码结果</h2><pre id="result" class="panel result"></pre></section><section class="card"><h2>错误信息</h2><pre id="error" class="panel error"></pre><p style="color: #919191">错误信息可能来源于扫码结果、扫码过程、扫码初始化等。</p></section><section class="card code"><h2>接入方式</h2><pre>IScan.config({ }</style></head><body><main class="page"><section class="hero"><h1>IScan 通用扫码SDK</h1><p>统一接入桥接扫码、微信小程序、微信 JSSDK 扫码、Web 摄像头扫码、图片识别和扫码枪输入。</p></section><section class="grid"><div class="card"><h2>功能说明</h2><ul class="feature-list"><li>支持桥接扫码、微信 JSSDK 扫码、Web 摄像头扫码、图片识别和扫码枪输入。</li><li>浏览器环境使用WASM库识别二维码和条形码。</li><li>扫码结果由监听规则统一回调，支持正则匹配和优先级排序。</li></ul></div><div class="card"><h2>当前状态</h2><p>SDK 状态：<span id="status" class="status">loading</span></p><p>运行环境：</p><pre id="output" class="panel"></pre></div></section><section class="card"><h2>操作</h2><p>点击开始后，会按桥接、微信、Web 摄像头、图片识别的顺序选择可用扫码方式。</p><div class="actions"><button onclick="startScan()" class="btn">开始扫码</button> <button onclick="scanVideo()" class="btn secondary">开启视频扫码</button> <button onclick="scanImage()" class="btn secondary">选择图片识别</button> <button onclick="stopScan()" class="btn secondary">停止扫码</button></div></section><section class="card"><h2>扫码结果</h2><pre id="result" class="panel result"></pre></section><section class="card"><h2>错误信息</h2><pre id="error" class="panel error"></pre><p style="color: #919191">错误信息可能来源于扫码结果、扫码过程、扫码初始化等。</p></section><section class="card code"><h2>接入方式</h2><pre>IScan.config({
webScanEnabled: true, webScanEnabled: true,
webScanCanvasEnabled: true, webScanCanvasEnabled: true,
webScanCloseButtonStyle: "background: rgba(27, 99, 244, 0.88);",
webScanBeepEnabled: true, webScanBeepEnabled: true,
initWechatJssdk: { initWechatJssdk: {
apiUrl: "https://your-domain.com/wechat/jssdk-config" apiUrl: "https://your-domain.com/wechat/jssdk-config"
@@ -249,6 +250,7 @@ IScan.stopScan();</pre></section></main><script>(function () {
var url = "https://vet.iqudoo.com/api?action=api.biz.wechat.JSSDKConfig"; var url = "https://vet.iqudoo.com/api?action=api.biz.wechat.JSSDKConfig";
initSDK({ initSDK({
webScanCanvasEnabled: true, webScanCanvasEnabled: true,
webScanCloseButtonStyle: "background: rgba(27, 99, 244, 0.88);",
webScanBeepEnabled: true, webScanBeepEnabled: true,
initWechatJssdk: { apiUrl: url } initWechatJssdk: { apiUrl: url }
}, function () { }, function () {

2
dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

3
src/services/scanner/index.js
View File

@@ -34,7 +34,8 @@ function delayClearScannerValue() {
function normalizeScannerValue(value) { function normalizeScannerValue(value) {
return value.replace(/[\uFF01-\uFF5E]/g, char => { return value.replace(/[\uFF01-\uFF5E]/g, char => {
return String.fromCharCode(char.charCodeAt(0) - 0xFEE0); return String.fromCharCode(char.charCodeAt(0) - 0xFEE0);
}).replace(/\u3002/g, "."); }).replace(/\u3002/g, ".")
.replace(/\u2014/g, "_");
} }
function stopScannerEvent(event) { function stopScannerEvent(event) {

42
src/services/web/index.js
View File

@@ -12,6 +12,8 @@ const scanWeb = {
const DEFAULT_SCAN_BEEP_AUDIO = scanBeepAudio; const DEFAULT_SCAN_BEEP_AUDIO = scanBeepAudio;
const ZXING_READER_WASM_PATH = "lib/reader.wasm"; const ZXING_READER_WASM_PATH = "lib/reader.wasm";
const WEBSCAN_CLOSE_BUTTON_ID = "__webscan_close_button__";
const DEFAULT_WEBSCAN_CLOSE_BUTTON_STYLE = "width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 20px; line-height: 28px; text-align: center; cursor: pointer; z-index: 10000;";
const currentScriptSrc = typeof document !== "undefined" const currentScriptSrc = typeof document !== "undefined"
&& document.currentScript && document.currentScript
&& document.currentScript.src; && document.currentScript.src;
@@ -211,6 +213,23 @@ function getCanvasDisplaySize(canvasEl, fallbackWidth, fallbackHeight) {
}; };
} }
function getWebScanCloseButtonPositionStyle(canvasEl) {
const rect = canvasEl.getBoundingClientRect();
const top = Math.max(0, Math.round(rect.top + 6));
const left = Math.max(0, Math.round(rect.right - 34));
return "position: fixed; top: " + top + "px; left: " + left + "px;";
}
function updateWebScanCloseButtonStyle(closeButtonEl, canvasEl) {
if (!closeButtonEl) {
return;
}
const customStyle = getConfig("webScanCloseButtonStyle") || "";
closeButtonEl.style.cssText = DEFAULT_WEBSCAN_CLOSE_BUTTON_STYLE
+ getWebScanCloseButtonPositionStyle(canvasEl)
+ customStyle;
}
function getCoverDrawOptions(sourceWidth, sourceHeight, targetWidth, targetHeight) { function getCoverDrawOptions(sourceWidth, sourceHeight, targetWidth, targetHeight) {
const scale = Math.max(targetWidth / sourceWidth, targetHeight / sourceHeight); const scale = Math.max(targetWidth / sourceWidth, targetHeight / sourceHeight);
const width = sourceWidth * scale; const width = sourceWidth * scale;
@@ -410,6 +429,7 @@ export function startScanForWeb(canvasStyle, onResult) {
stopActiveWebScan(); stopActiveWebScan();
scanWeb.uuid = createUUID(); scanWeb.uuid = createUUID();
scanWeb.finish = false; scanWeb.finish = false;
currentUuid = scanWeb.uuid;
let videoEl = createEl("video", let videoEl = createEl("video",
"__webscan_video__", "__webscan_video__",
"display: none", false); "display: none", false);
@@ -424,8 +444,22 @@ export function startScanForWeb(canvasStyle, onResult) {
canvasDisplay = canvasEl.style.display; canvasDisplay = canvasEl.style.display;
let canvasDisplaySize = getCanvasDisplaySize(canvasEl, 300, 240); let canvasDisplaySize = getCanvasDisplaySize(canvasEl, 300, 240);
canvasEl.style.display = "none"; canvasEl.style.display = "none";
let closeButtonEl = null;
if (canvasEnabled) {
closeButtonEl = createEl("button", WEBSCAN_CLOSE_BUTTON_ID, "display: none;", true);
closeButtonEl.type = "button";
closeButtonEl.innerHTML = "x";
closeButtonEl.setAttribute("aria-label", "close");
closeButtonEl.onclick = event => {
event.preventDefault && event.preventDefault();
event.stopPropagation && event.stopPropagation();
if (scanWeb.uuid === currentUuid) {
scanWeb.uuid = null;
}
};
closeButtonEl.uuid = scanWeb.uuid;
}
let context = canvasEl.getContext("2d"); let context = canvasEl.getContext("2d");
currentUuid = scanWeb.uuid;
videoEl.width = 300; videoEl.width = 300;
videoEl.height = 300; videoEl.height = 300;
videoEl.uuid = scanWeb.uuid; videoEl.uuid = scanWeb.uuid;
@@ -474,6 +508,9 @@ export function startScanForWeb(canvasStyle, onResult) {
videoEl.pause && videoEl.pause(); videoEl.pause && videoEl.pause();
videoEl.srcObject = null; videoEl.srcObject = null;
} catch (_e) { } } catch (_e) { }
if (closeButtonEl) {
closeButtonEl.style.display = "none";
}
}; };
let tick = () => { let tick = () => {
try { try {
@@ -494,6 +531,8 @@ export function startScanForWeb(canvasStyle, onResult) {
if (canvasEnabled && !displayed) { if (canvasEnabled && !displayed) {
displayed = true; displayed = true;
canvasEl.style.display = canvasDisplay || ""; canvasEl.style.display = canvasDisplay || "";
updateWebScanCloseButtonStyle(closeButtonEl, canvasEl);
closeButtonEl && (closeButtonEl.style.display = "block");
} }
detecting = true; detecting = true;
detector.detect(videoEl).then(barcodes => { detector.detect(videoEl).then(barcodes => {
@@ -546,5 +585,6 @@ export function startScanForWeb(canvasStyle, onResult) {
}).finally(() => { }).finally(() => {
removeEl("__webscan_video__", currentUuid); removeEl("__webscan_video__", currentUuid);
removeEl("__webscan_canvas__", currentUuid); removeEl("__webscan_canvas__", currentUuid);
removeEl(WEBSCAN_CLOSE_BUTTON_ID, currentUuid);
}) })
} }

4
types/index.d.ts vendored
View File

@@ -45,6 +45,10 @@ interface ScanConfigOptions {
* 网页扫码canvas样式，默认：position: fixed; width: 300px; height: 300px; top: 0; left: 0; z-index: 9999; * 网页扫码canvas样式，默认：position: fixed; width: 300px; height: 300px; top: 0; left: 0; z-index: 9999;
*/ */
webScanCanvasStyle?: string, webScanCanvasStyle?: string,
/**
* 网页扫码canvas关闭按钮样式，默认显示在canvas右上角
*/
webScanCloseButtonStyle?: string,
/** /**
* 网页扫码类型，默认支持二维码和条码 * 网页扫码类型，默认支持二维码和条码
*/ */