nv-img-barcode-bw 1.0.1

package/css.js

@@ -0,0 +1,170 @@
+module.exports = `
+    <style>
+    :host {
+	display:inline-block; 
+	overflow: hidden; 
+	vertical-align: top;
+    }
+    :host([hide-button="true"])  {
+        /* 1. 绝对定位脱离文档流，不占位 */
+        position: absolute;
+        /* 2. 缩到无限小 */
+        width: 0 !important;
+        height: 0 !important;
+     }
+     .barcode-btn {
+	padding: 12px 24px;
+	background:   var(--barcode-btn-background);
+	color:        var(--barcode-btn-color);
+	border: none;
+	border-radius: var(--barcode-btn-border-radius);
+	font-size:     var(--barcode-btn-font-size);
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+    }
+    .barcode-btn:hover {
+	transform: translateY(-2px);
+	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    }
+    .barcode-btn:active {
+       transform: translateY(0);
+    }
+    .barcode-btn:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+    }
+    
+
+    .loading {
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	border: 3px solid rgba(255,255,255,0.3);
+	border-top: 3px solid var(--barcode-btn-color);
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+       0%   { transform: rotate(0deg); }
+       100% { transform: rotate(360deg); }
+    }
+
+    /* 弹窗样式 */
+    .barcode-popup {
+	    position: fixed;
+	    top: 0;
+	    left: 0;
+	    right: 0;
+	    bottom: 0;
+	    background: rgba(0,0,0,0.8);
+	    display: flex;
+	    align-items: center;
+	    justify-content: center;
+	    z-index: 10000;
+    }
+
+    .popup-content {
+	    background: white;
+	    padding: 30px;
+	    border-radius: 15px;
+	    max-width: 90%;
+	    max-height: 90%;
+	    overflow: auto;
+	    text-align: center;
+	    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+	    position: relative;
+    }
+
+    .popup-close {
+	    position: absolute;
+	    top: 15px;
+	    right: 15px;
+	    background: none;
+	    border: none;
+	    font-size: 28px;
+	    color: #666;
+	    cursor: pointer;
+	    padding: 5px;
+	    line-height: 1;
+	    width: 40px;
+	    height: 40px;
+	    display: flex;
+	    align-items: center;
+	    justify-content: center;
+	    border-radius: 50%;
+    }
+
+    .popup-close:hover {
+	    background: #f7fafc;
+	    color: #e53e3e;
+    }
+
+    .barcode-container {
+	margin: 20px 0;
+	padding: 20px;
+	background: var(--barcode-container-background);
+	border-radius: 8px;
+	display: inline-block;
+    }
+
+    .barcode-image {
+    max-width: 100%;
+    max-height: 300px;
+    }
+
+    .popup-info {
+	margin: 20px 0;
+	padding: 15px;
+	background: #f7fafc;
+	border-radius: 8px;
+	text-align: left;
+    }
+    .barcode-line-color {
+	color: var(--barcode-line-color);
+    }
+
+
+    .popup-actions {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+    margin-top: 20px;
+    flex-wrap: wrap;
+    }
+
+    .action-btn {
+    padding: 10px 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    }
+
+    .action-btn:hover {
+    transform: translateY(-2px);
+	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    }
+
+    .action-btn.secondary {
+	background: linear-gradient(135deg, #4fd1c7 0%, #319795 100%);
+    }
+
+    .action-btn.tertiary {
+	background: linear-gradient(135deg, #fc8181 0%, #c53030 100%);
+    }
+    </style>
+`;

package/decd.js

@@ -0,0 +1,270 @@
+const { svg2str } = require("./eng");
+
+
+module.exports = async (o=null, barcodeType = null,show_dialog=false)=> {
+    let svgContent = "";
+    let fileName = "unknown";
+    let fileSize = 0;
+    
+    // Helper: 从blob/arraybuffer/file创建svg
+    async function createSvgFromImageSource(source, mimeType = "") {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            const img = new Image();
+            
+            reader.onload = (e) => {
+                img.onload = () => {
+                    const svg = `
+<svg xmlns="http://www.w3.org/2000/svg" 
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="${img.width}" 
+     height="${img.height}" 
+     viewBox="0 0 ${img.width} ${img.height}">
+    <image xlink:href="${e.target.result}" 
+           width="${img.width}" 
+           height="${img.height}" 
+           preserveAspectRatio="none"/>
+</svg>`;
+                    resolve(svg);
+                };
+                img.onerror = () => reject(new Error("图片加载失败"));
+                img.src = e.target.result;
+            };
+            reader.onerror = () => reject(new Error("文件读取失败"));
+            
+            if (source instanceof Blob || source instanceof File) {
+                reader.readAsDataURL(source);
+            } else if (source instanceof ArrayBuffer) {
+                const blob = new Blob([source], { type: mimeType || "image/png" });
+                reader.readAsDataURL(blob);
+            } else if (ArrayBuffer.isView(source)) {
+                const blob = new Blob([source], { type: mimeType || "image/png" });
+                reader.readAsDataURL(blob);
+            } else {
+                reject(new Error("不支持的图片源类型"));
+            }
+        });
+    }
+    
+    // Helper: 读取文件为文本
+    async function readFileAsText(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e) => resolve(e.target.result);
+            reader.onerror = () => reject(new Error("文件读取失败"));
+            reader.readAsText(file);
+        });
+    }
+    
+    // Helper: 通过文件选择器选择文件
+    async function selectFileViaPicker() {
+        if (!window.showOpenFilePicker) {
+            throw new Error("您的浏览器不支持 showOpenFilePicker API");
+        }
+        
+        try {
+            const [fileHandle] = await window.showOpenFilePicker({
+                types: [{
+                    description: "图片文件",
+                    accept: {
+                        "image/*": [".png", ".jpg", ".jpeg", ".webp", ".gif", ".bmp", ".svg"]
+                    }
+                }],
+                multiple: false
+            });
+            
+            const file = await fileHandle.getFile();
+            fileName = file.name;
+            fileSize = file.size;
+            
+            if (file.type === "image/svg+xml" || file.name.endsWith(".svg")) {
+                return await readFileAsText(file);
+            } else {
+                return await createSvgFromImageSource(file);
+            }
+        } catch (error) {
+            if (error.name === "AbortError") {
+                throw new Error("用户取消选择");
+            }
+            throw error;
+        }
+    }
+    
+    // Helper: 显示结果对话框
+    function showResultDialog(decodedText) {
+        return new Promise((resolve) => {
+            const dialog = document.createElement('div');
+            dialog.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0,0,0,0.5);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                z-index: 10000;
+            `;
+            
+            const card = document.createElement('div');
+            card.style.cssText = `
+                background: white;
+                padding: 20px;
+                border-radius: 8px;
+                box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+                min-width: 300px;
+                max-width: 500px;
+                max-height: 80vh;
+                overflow-y: auto;
+            `;
+            
+            const title = document.createElement('h3');
+            title.textContent = '解码结果';
+            title.style.cssText = 'margin: 0 0 15px 0; color: #333;';
+            
+            const textArea = document.createElement('textarea');
+            textArea.value = decodedText;
+            textArea.style.cssText = `
+                width: 100%;
+                min-height: 100px;
+                padding: 10px;
+                border: 1px solid #ddd;
+                border-radius: 4px;
+                font-family: monospace;
+                font-size: 14px;
+                resize: vertical;
+                margin-bottom: 15px;
+                box-sizing: border-box;
+            `;
+            
+            const buttonContainer = document.createElement('div');
+            buttonContainer.style.cssText = 'display: flex; justify-content: flex-end; gap: 10px;';
+            
+            const copyBtn = document.createElement('button');
+            copyBtn.textContent = '复制';
+            copyBtn.style.cssText = `
+                background: #1890ff;
+                color: white;
+                border: none;
+                padding: 8px 20px;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 14px;
+            `;
+            
+            const closeBtn = document.createElement('button');
+            closeBtn.textContent = '关闭';
+            closeBtn.style.cssText = `
+                background: #f5f5f5;
+                color: #333;
+                border: 1px solid #d9d9d9;
+                padding: 8px 20px;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 14px;
+            `;
+            
+            copyBtn.onclick = () => {
+                textArea.select();
+                document.execCommand('copy');
+                const originalText = copyBtn.textContent;
+                copyBtn.textContent = '已复制!';
+                copyBtn.style.background = '#52c41a';
+                setTimeout(() => {
+                    copyBtn.textContent = originalText;
+                    copyBtn.style.background = '#1890ff';
+                }, 2000);
+            };
+            
+            closeBtn.onclick = () => {
+                document.body.removeChild(dialog);
+                resolve();
+            };
+            
+            card.appendChild(title);
+            card.appendChild(textArea);
+            buttonContainer.appendChild(copyBtn);
+            buttonContainer.appendChild(closeBtn);
+            card.appendChild(buttonContainer);
+            dialog.appendChild(card);
+            document.body.appendChild(dialog);
+            
+            // 点击背景关闭
+            dialog.onclick = (e) => {
+                if (e.target === dialog) {
+                    document.body.removeChild(dialog);
+                    resolve();
+                }
+            };
+            
+            // 自动选择文本
+            textArea.select();
+        });
+    }
+    
+    try {
+        // 1. HTMLInputElement (type="file")
+        if (o instanceof HTMLInputElement && o.type === 'file') {
+            if (!o.files || o.files.length === 0) {
+                throw new Error("请先选择文件");
+            }
+            const file = o.files[0];
+            fileName = file.name;
+            fileSize = file.size;
+            
+            if (file.type === "image/svg+xml" || file.name.endsWith(".svg")) {
+                svgContent = await readFileAsText(file);
+            } else {
+                svgContent = await createSvgFromImageSource(file);
+            }
+        } 
+        // 2. Blob对象
+        else if (o instanceof Blob) {
+            fileName = o.name || "blob";
+            fileSize = o.size;
+            
+            if (o.type === "image/svg+xml") {
+                svgContent = await readFileAsText(o);
+            } else {
+                svgContent = await createSvgFromImageSource(o);
+            }
+        } 
+        // 3. ArrayBuffer
+        else if (o instanceof ArrayBuffer) {
+            fileName = "arraybuffer";
+            fileSize = o.byteLength;
+            svgContent = await createSvgFromImageSource(o);
+        } 
+        // 4. TypedArray (Uint8Array, etc.)
+        else if (ArrayBuffer.isView(o)) {
+            fileName = "typedarray";
+            fileSize = o.byteLength;
+            svgContent = await createSvgFromImageSource(o);
+        } 
+        // 5. 字符串 (假设是SVG字符串)
+        else if (typeof(o) === "string") {
+            svgContent = o;
+        } 
+        // 6. 其他情况 (undefined/null/无参数) - 使用文件选择器
+        else {
+            svgContent = await selectFileViaPicker();
+        }
+        
+        // 解码SVG
+        const decodedText = await svg2str(svgContent, barcodeType);
+        // 显示结果对话框
+	if(show_dialog) {
+            await showResultDialog(decodedText);
+	} else {}
+        return [true, decodedText]
+        
+    } catch (error) {
+        alert(`解码失败: ${error.message}`);
+        console.error("解码失败:", error);
+        return [false,error]
+    }
+};
+
+
+