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

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

@@ -12,6 +12,8 @@ const scanWeb = {
const DEFAULT_SCAN_BEEP_AUDIO = scanBeepAudio;
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"
&& document.currentScript
&& 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) {
const scale = Math.max(targetWidth / sourceWidth, targetHeight / sourceHeight);
const width = sourceWidth * scale;
@@ -410,6 +429,7 @@ export function startScanForWeb(canvasStyle, onResult) {
stopActiveWebScan();
scanWeb.uuid = createUUID();
scanWeb.finish = false;
currentUuid = scanWeb.uuid;
let videoEl = createEl("video",
"__webscan_video__",
"display: none", false);
@@ -424,8 +444,22 @@ export function startScanForWeb(canvasStyle, onResult) {
canvasDisplay = canvasEl.style.display;
let canvasDisplaySize = getCanvasDisplaySize(canvasEl, 300, 240);
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");
currentUuid = scanWeb.uuid;
videoEl.width = 300;
videoEl.height = 300;
videoEl.uuid = scanWeb.uuid;
@@ -474,6 +508,9 @@ export function startScanForWeb(canvasStyle, onResult) {
videoEl.pause && videoEl.pause();
videoEl.srcObject = null;
} catch (_e) { }
if (closeButtonEl) {
closeButtonEl.style.display = "none";
}
};
let tick = () => {
try {
@@ -494,6 +531,8 @@ export function startScanForWeb(canvasStyle, onResult) {
if (canvasEnabled && !displayed) {
displayed = true;
canvasEl.style.display = canvasDisplay || "";
updateWebScanCloseButtonStyle(closeButtonEl, canvasEl);
closeButtonEl && (closeButtonEl.style.display = "block");
}
detecting = true;
detector.detect(videoEl).then(barcodes => {
@@ -546,5 +585,6 @@ export function startScanForWeb(canvasStyle, onResult) {
}).finally(() => {
removeEl("__webscan_video__", currentUuid);
removeEl("__webscan_canvas__", currentUuid);
removeEl(WEBSCAN_CLOSE_BUTTON_ID, currentUuid);
})
}