@smallwei/avue 3.9.2 → 3.9.4

package/lib/src/plugin/screenshot/index.js

@@ -1,16 +1,38 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var src_core_packages = require('../../core/packages.js');
+var src_utils_util = require('../../utils/util.js');
 
 function $Screenshot (doc, option = {}) {
-    if (!window.html2canvas) {
+    var _a;
+    if (typeof window === 'undefined' || typeof HTMLElement === 'undefined' || !(doc instanceof HTMLElement)) {
+        return Promise.reject(new TypeError('请传入需要截图的 DOM 节点。'));
+    }
+    const renderer = option.renderer || window.html2canvas;
+    if (typeof renderer !== 'function') {
         src_core_packages.default.logs('Screenshot');
-        return;
+        const error = new Error('未检测到 html2canvas，请先引入 html2canvas。');
+        (_a = option.onError) === null || _a === void 0 ? void 0 : _a.call(option, error);
+        return Promise.reject(error);
     }
-    return window.html2canvas(doc, option);
+    const { download, filename = `screenshot-${Date.now()}.png`, type = 'image/png', quality, onSuccess, onError, renderer: _renderer, ...rendererOption } = option;
+    return Promise.resolve(renderer(doc, rendererOption))
+        .then((canvas) => {
+        if (!(canvas instanceof HTMLCanvasElement))
+            throw new Error('截图插件未返回 Canvas。');
+        if (download)
+            src_utils_util.downFile(canvas.toDataURL(type, quality), filename);
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(canvas);
+        return canvas;
+    })
+        .catch((error) => {
+        const normalized = error instanceof Error ? error : new Error(String(error || '截图失败。'));
+        onError === null || onError === void 0 ? void 0 : onError(normalized);
+        throw normalized;
+    });
 }
 
 exports.default = $Screenshot;

package/lib/src/plugin/video/index.js

@@ -1,59 +1,148 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 class RecordVideo {
-    constructor(videoObj) {
+    constructor(videoObj, options = {}) {
         this.video = videoObj;
+        this.options = options;
         this.mediaRecorder = null;
+        this.stream = null;
         this.chunks = [];
+        this.objectUrl = null;
+        this.destroyed = false;
+        this.handleLoadedMetadata = () => {
+            const playResult = this.video.play();
+            if (playResult && typeof playResult.catch === 'function') {
+                playResult.catch(() => undefined);
+            }
+        };
+        this.handleDataAvailable = (event) => {
+            if (event.data && event.data.size > 0) {
+                this.chunks.push(event.data);
+            }
+        };
     }
     init() {
-        return new Promise((resolve, reject) => {
-            navigator.mediaDevices
-                .getUserMedia({
-                audio: true,
-                video: true,
-            })
-                .then((stream) => {
-                if ('srcObject' in this.video) {
-                    this.video.srcObject = stream;
-                }
-                else {
-                    this.video.src = window.URL.createObjectURL(stream);
-                }
-                this.video.addEventListener('loadmetadata', () => {
-                    this.video.play();
-                });
-                this.mediaRecorder = new MediaRecorder(stream);
-                this.mediaRecorder.addEventListener('dataavailable', (e) => {
-                    this.chunks.push(e.data);
-                });
-                resolve();
-            })
-                .catch((error) => {
-                reject(error);
-            });
+        if (!this.isSupport()) {
+            return Promise.reject(new Error('MediaDevices.getUserMedia or MediaRecorder is not supported'));
+        }
+        this.destroyed = false;
+        return navigator.mediaDevices
+            .getUserMedia(this.options.constraints || {
+            audio: true,
+            video: true,
+        })
+            .then((stream) => {
+            if (this.destroyed) {
+                stream.getTracks().forEach((track) => track.stop());
+                return;
+            }
+            this.stream = stream;
+            if ('srcObject' in this.video) {
+                this.video.srcObject = stream;
+            }
+            else {
+                this.objectUrl = window.URL.createObjectURL(stream);
+                this.video.src = this.objectUrl;
+            }
+            this.video.addEventListener('loadedmetadata', this.handleLoadedMetadata);
+            const recorderOptions = this.getRecorderOptions();
+            this.mediaRecorder = recorderOptions
+                ? new MediaRecorder(stream, recorderOptions)
+                : new MediaRecorder(stream);
+            this.mediaRecorder.addEventListener('dataavailable', this.handleDataAvailable);
+        })
+            .catch((error) => {
+            this.destroy();
+            throw error;
         });
     }
     startRecord() {
         if (this.mediaRecorder && this.mediaRecorder.state === 'inactive') {
+            this.chunks = [];
             this.mediaRecorder.start();
+            return true;
         }
+        return false;
     }
     stopRecord() {
         if (this.mediaRecorder && this.mediaRecorder.state === 'recording') {
             this.mediaRecorder.stop();
+            return true;
         }
+        return false;
+    }
+    getBlob() {
+        var _a, _b;
+        if (!this.chunks.length)
+            return null;
+        const type = ((_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.mimeType) || ((_b = this.chunks[0]) === null || _b === void 0 ? void 0 : _b.type) || 'video/webm';
+        return new Blob(this.chunks, { type });
+    }
+    captureFrame(type = 'image/png', quality) {
+        if (this.video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+            return null;
+        }
+        const width = this.video.videoWidth || this.video.clientWidth;
+        const height = this.video.videoHeight || this.video.clientHeight;
+        if (!width || !height)
+            return null;
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const context = canvas.getContext('2d');
+        if (!context)
+            return null;
+        context.drawImage(this.video, 0, 0, width, height);
+        return canvas.toDataURL(type, quality);
     }
     isSupport() {
-        const flag = navigator.mediaDevices && navigator.mediaDevices.getUserMedia;
+        const flag = typeof navigator !== 'undefined' &&
+            navigator.mediaDevices &&
+            navigator.mediaDevices.getUserMedia &&
+            typeof MediaRecorder !== 'undefined';
         if (flag) {
             return true;
         }
         return false;
     }
+    getRecorderOptions() {
+        const mimeType = this.options.mimeType;
+        if (!mimeType ||
+            typeof MediaRecorder === 'undefined' ||
+            !MediaRecorder.isTypeSupported ||
+            !MediaRecorder.isTypeSupported(mimeType)) {
+            return undefined;
+        }
+        return { mimeType };
+    }
+    destroy() {
+        this.destroyed = true;
+        this.video.removeEventListener('loadedmetadata', this.handleLoadedMetadata);
+        if (this.mediaRecorder) {
+            this.mediaRecorder.removeEventListener('dataavailable', this.handleDataAvailable);
+            if (this.mediaRecorder.state !== 'inactive') {
+                this.mediaRecorder.stop();
+            }
+        }
+        if (this.stream) {
+            this.stream.getTracks().forEach((track) => track.stop());
+        }
+        this.video.pause();
+        if ('srcObject' in this.video) {
+            this.video.srcObject = null;
+        }
+        if (this.objectUrl) {
+            window.URL.revokeObjectURL(this.objectUrl);
+            this.video.removeAttribute('src');
+        }
+        this.mediaRecorder = null;
+        this.stream = null;
+        this.objectUrl = null;
+        this.chunks = [];
+    }
 }
 
 exports.default = RecordVideo;

package/lib/src/plugin/watermark/index.js

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -6,117 +6,73 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var src_plugin_watermark_watermark = require('./watermark.js');
 var src_utils_util = require('../../utils/util.js');
 
-let canvas;
-let ctx;
-const configDefault = {
-    width: 200,
-    height: 200,
-};
-const config = {
+const detailDefault = {
     text: 'avueJS',
-    fontFamily: 'microsoft yahei',
-    color: '#999',
+    fontFamily: 'Microsoft YaHei, sans-serif',
+    color: '#999999',
     fontSize: 16,
     opacity: 100,
     bottom: 10,
     right: 10,
-    ratio: 1,
+    ratio: 0.92,
+    scaleWithImage: true
 };
 function $Watermark (opt = {}) {
     return new src_plugin_watermark_watermark.default(opt);
 }
-function detailImg(file, option = {}) {
-    return new Promise((resolve) => {
-        const { text, fontFamily, color, fontSize, opacity, bottom, right, ratio } = option;
-        initParams();
-        fileToBase64(file, initImg);
-        function initParams() {
-            config.text = text || config.text;
-            config.fontFamily = fontFamily || config.fontFamily;
-            config.color = color || config.color;
-            config.fontSize = fontSize || config.fontSize;
-            config.opacity = opacity || config.opacity;
-            config.bottom = bottom || config.bottom;
-            config.right = right || config.right;
-            config.ratio = ratio || config.ratio;
-        }
-        function initImg(data) {
-            const img = new Image();
-            img.src = data;
-            img.onload = function () {
-                const width = img.width;
-                const height = img.height;
-                cretedCanvas(width, height);
-                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0, width, height);
-                setText(width, height);
-                const currentCanvas = document.getElementById('canvas');
-                resolve(src_utils_util.dataURLtoFile(currentCanvas.toDataURL(file.type, config.ratio), file.name));
-            };
-        }
-        function cretedCanvas(width, height) {
-            canvas = document.getElementById('canvas');
-            if (canvas === null) {
-                canvas = document.createElement('canvas');
-                canvas.id = 'canvas';
-                canvas.className = 'avue-canvas';
-                document.body.appendChild(canvas);
-            }
-            ctx = canvas.getContext('2d');
-            canvas.width = width;
-            canvas.height = height;
-        }
-        function setText(width, height) {
-            const txt = config.text;
-            const param = calcParam(txt, width, height);
-            if (!ctx)
-                return;
-            ctx.font = param.fontSize + 'px ' + config.fontFamily;
-            ctx.fillStyle = config.color;
-            ctx.globalAlpha = config.opacity / 100;
-            ctx.fillText(txt, param.x, param.y);
-        }
-        function calcParam(txt, width, height) {
-            let x;
-            let y;
-            const calcFontSize = config.fontSize / configDefault.width;
-            const fontSize = calcFontSize * width;
-            if (config.bottom) {
-                y = configDefault.height - config.bottom;
-            }
-            else {
-                y = config.top;
-            }
-            if (config.right) {
-                x = configDefault.width - config.right;
-            }
-            else {
-                x = config.left;
-            }
-            if (!ctx) {
-                return { x: 0, y: 0, fontSize };
-            }
-            ctx.font = config.fontSize + 'px ' + config.fontFamily;
-            const txtWidth = Number(ctx.measureText(txt).width);
-            x = x - txtWidth;
-            const calcPosX = x / configDefault.width;
-            const calcPosY = y / configDefault.height;
-            x = calcPosX * width;
-            y = calcPosY * height;
-            return {
-                x,
-                y,
-                fontSize,
-            };
-        }
-        function fileToBase64(rawFile, callback) {
-            const reader = new FileReader();
-            reader.readAsDataURL(rawFile);
-            reader.onload = function (e) {
-                var _a;
-                callback((_a = e.target) === null || _a === void 0 ? void 0 : _a.result);
-            };
-        }
+const loadFileImage = (file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onerror = () => reject(new Error('图片读取失败。'));
+        reader.onload = () => {
+            const image = new Image();
+            image.onerror = () => reject(new Error('图片解析失败。'));
+            image.onload = () => resolve(image);
+            image.src = String(reader.result || '');
+        };
+        reader.readAsDataURL(file);
     });
+};
+/**
+ * 为图片生成水印文件。每次调用使用独立 Canvas，避免并发任务互相覆盖。
+ */
+async function detailImg(file, option = {}) {
+    if (typeof File === 'undefined' || !(file instanceof File))
+        throw new TypeError('请传入有效的图片文件。');
+    if (!file.type.startsWith('image/'))
+        throw new TypeError('仅支持图片文件添加水印。');
+    const config = { ...detailDefault, ...option };
+    const image = await loadFileImage(file);
+    const canvas = document.createElement('canvas');
+    canvas.width = image.naturalWidth || image.width;
+    canvas.height = image.naturalHeight || image.height;
+    const context = canvas.getContext('2d');
+    if (!context)
+        throw new Error('当前浏览器不支持 Canvas。');
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    const scale = config.scaleWithImage ? canvas.width / 200 : 1;
+    const fontSize = Math.max(1, Number(config.fontSize) * scale);
+    const ratio = Math.min(1, Math.max(0, Number(config.ratio) || detailDefault.ratio));
+    const opacity = Math.min(1, Math.max(0, Number(config.opacity) / 100));
+    context.save();
+    context.font = `${fontSize}px ${config.fontFamily}`;
+    context.fillStyle = config.color;
+    context.globalAlpha = opacity;
+    context.textBaseline = 'alphabetic';
+    const text = String(config.text || '');
+    const textWidth = context.measureText(text).width;
+    const hasLeft = option.left !== undefined && option.left !== null;
+    const hasTop = option.top !== undefined && option.top !== null;
+    const x = hasLeft
+        ? Number(option.left) * scale
+        : canvas.width - Number(config.right) * scale - textWidth;
+    const y = hasTop
+        ? Number(option.top) * scale + fontSize
+        : canvas.height - Number(config.bottom) * scale;
+    context.fillText(text, x, y);
+    context.restore();
+    const type = file.type === 'image/png' ? 'image/png' : 'image/jpeg';
+    return src_utils_util.dataURLtoFile(canvas.toDataURL(type, ratio), file.name);
 }
 
 exports.default = $Watermark;

package/lib/src/plugin/watermark/watermark.js

@@ -1,115 +1,158 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var src_utils_util = require('../../utils/util.js');
 
+const defaultOption = {
+    width: 400,
+    height: 200,
+    text: 'avueJS',
+    fontSize: '30px',
+    fontStyle: 'Microsoft YaHei, sans-serif',
+    textAlign: 'center',
+    color: 'rgba(100,100,100,0.15)',
+    degree: -20,
+    zIndex: 9999,
+    id: ''
+};
 class WaterMark {
     constructor(opt = {}) {
-        this.CONTAINERID = src_utils_util.randomId();
-        this.drawCanvas = this.drawCanvas.bind(this);
-        this.parentObserver = this.parentObserver.bind(this);
-        this.Repaint = this.Repaint.bind(this);
         this.styleStr = '';
         this.isOberserve = false;
-        this.init(opt);
-        this.drawCanvas();
-        this.parentObserver();
+        this.container = null;
+        this.parent = null;
+        this.overlayObserver = null;
+        this.parentObserver = null;
+        this.parentOriginalPosition = null;
+        this.removed = false;
+        this.CONTAINERID = `avue-watermark-${src_utils_util.randomId()}`;
+        this.option = { ...defaultOption, ...opt };
+        if (typeof document !== 'undefined')
+            this.drawCanvas();
     }
-    init(opt) {
-        this.option = Object.assign({
-            width: 400,
-            height: 200,
-            text: 'avueJS',
-            fontSize: '30px',
-            fontStyle: 'microsoft yahei',
-            textAlign: 'center',
-            color: 'rgba(100,100,100,0.15)',
-            degree: -20,
-        }, opt);
+    getParent() {
+        const target = this.option.id;
+        if (!target)
+            return document.body;
+        if (target instanceof HTMLElement)
+            return target;
+        return document.getElementById(String(target)) || document.body;
     }
-    drawCanvas() {
-        this.isOberserve = true;
-        const divContainer = document.createElement('div');
+    getBackgroundUrl() {
         const canvas = document.createElement('canvas');
+        canvas.width = Math.max(1, Number(this.option.width) || defaultOption.width);
+        canvas.height = Math.max(1, Number(this.option.height) || defaultOption.height);
         const context = canvas.getContext('2d');
-        divContainer.id = this.CONTAINERID;
-        canvas.width = this.option.width;
-        canvas.height = this.option.height;
         if (!context)
-            return;
+            return '';
         context.font = `${this.option.fontSize} ${this.option.fontStyle}`;
         context.textAlign = this.option.textAlign;
+        context.textBaseline = 'middle';
         context.fillStyle = this.option.color;
         context.translate(canvas.width / 2, canvas.height / 2);
-        context.rotate((this.option.degree * Math.PI) / 180);
-        context.fillText(this.option.text, 0, 0);
-        const backgroundUrl = canvas.toDataURL('image/png');
-        const flag = this.option.id;
-        let el = null;
-        if (flag)
-            el = document.getElementById(flag);
-        this.styleStr = `
-      position:${flag ? 'absolute' : 'fixed'};
-      top:0;
-      left:0;
-      width:${flag && el ? el.offsetWidth + 'px' : '100%'};
-      height:${flag && el ? el.offsetHeight + 'px' : '100%'};
-      z-index:9999;
-      pointer-events:none;
-      background-repeat:repeat;
-      background-image:url('${backgroundUrl}')`;
-        divContainer.setAttribute('style', this.styleStr);
-        if (flag && el) {
-            el.appendChild(divContainer);
-        }
-        else {
-            document.body.appendChild(divContainer);
+        context.rotate((Number(this.option.degree) * Math.PI) / 180);
+        context.fillText(String(this.option.text || ''), 0, 0);
+        return canvas.toDataURL('image/png');
+    }
+    getStyle(parent, backgroundUrl) {
+        const local = Boolean(this.option.id) && parent !== document.body;
+        return [
+            `position:${local ? 'absolute' : 'fixed'}`,
+            'inset:0',
+            'display:block',
+            'overflow:hidden',
+            `z-index:${Number(this.option.zIndex) || defaultOption.zIndex}`,
+            'pointer-events:none',
+            'user-select:none',
+            `background-repeat:repeat`,
+            `background-size:${Math.max(1, Number(this.option.width) || defaultOption.width)}px ${Math.max(1, Number(this.option.height) || defaultOption.height)}px`,
+            `background-image:url("${backgroundUrl}")`
+        ].join(';');
+    }
+    prepareParent(parent) {
+        if (!this.option.id || parent === document.body || typeof window === 'undefined')
+            return;
+        if (window.getComputedStyle(parent).position === 'static') {
+            this.parentOriginalPosition = parent.style.position;
+            parent.style.position = 'relative';
         }
-        this.wmObserver(divContainer);
-        this.isOberserve = false;
     }
-    wmObserver(divContainer) {
-        const wmConf = { attributes: true, childList: true, characterData: true };
-        const wmObserver = new MutationObserver((mo) => {
-            if (!this.isOberserve) {
-                const target = mo[0].target;
-                target.setAttribute('style', this.styleStr);
-                target.setAttribute('id', this.CONTAINERID);
-                wmObserver.takeRecords();
+    observe() {
+        this.disconnectObservers();
+        if (!this.container || !this.parent || typeof MutationObserver === 'undefined')
+            return;
+        this.overlayObserver = new MutationObserver(() => {
+            if (this.isOberserve || !this.container)
+                return;
+            this.isOberserve = true;
+            if (this.container.id !== this.CONTAINERID)
+                this.container.id = this.CONTAINERID;
+            if (this.container.getAttribute('style') !== this.styleStr) {
+                this.container.setAttribute('style', this.styleStr);
             }
+            this.isOberserve = false;
         });
-        wmObserver.observe(divContainer, wmConf);
-    }
-    parentObserver() {
-        var _a;
-        const bodyObserver = new MutationObserver(() => {
-            if (!this.isOberserve) {
-                const wm = document.querySelector(`#${this.CONTAINERID}`);
-                if (!wm) {
-                    this.drawCanvas();
-                }
-                else if (wm.getAttribute('style') !== this.styleStr) {
-                    wm.setAttribute('style', this.styleStr);
-                }
-            }
+        this.overlayObserver.observe(this.container, { attributes: true, attributeFilter: ['id', 'style'] });
+        this.parentObserver = new MutationObserver(() => {
+            var _a;
+            if (!this.isOberserve && this.container && !((_a = this.parent) === null || _a === void 0 ? void 0 : _a.contains(this.container)))
+                this.drawCanvas();
         });
-        const parentNode = (_a = document.querySelector(`#${this.CONTAINERID}`)) === null || _a === void 0 ? void 0 : _a.parentNode;
-        if (parentNode) {
-            bodyObserver.observe(parentNode, { childList: true });
+        this.parentObserver.observe(this.parent, { childList: true });
+    }
+    disconnectObservers() {
+        var _a, _b;
+        (_a = this.overlayObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.parentObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this.overlayObserver = null;
+        this.parentObserver = null;
+    }
+    restoreParentPosition() {
+        if (this.parent && this.parentOriginalPosition !== null && this.parent.style.position === 'relative') {
+            this.parent.style.position = this.parentOriginalPosition;
         }
+        this.parentOriginalPosition = null;
+    }
+    drawCanvas() {
+        var _a;
+        if (typeof document === 'undefined')
+            return;
+        this.removed = false;
+        this.isOberserve = true;
+        this.disconnectObservers();
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
+        this.restoreParentPosition();
+        const parent = this.getParent();
+        this.prepareParent(parent);
+        const container = document.createElement('div');
+        container.id = this.CONTAINERID;
+        container.className = 'avue-watermark';
+        container.setAttribute('aria-hidden', 'true');
+        this.styleStr = this.getStyle(parent, this.getBackgroundUrl());
+        container.setAttribute('style', this.styleStr);
+        parent.appendChild(container);
+        this.container = container;
+        this.parent = parent;
+        this.isOberserve = false;
+        this.observe();
     }
     Repaint(opt = {}) {
-        this.remove();
-        this.init(opt);
+        this.option = { ...this.option, ...opt };
         this.drawCanvas();
+        return this;
     }
     remove() {
         var _a;
+        this.removed = true;
         this.isOberserve = true;
-        const wm = document.querySelector(`#${this.CONTAINERID}`);
-        (_a = wm === null || wm === void 0 ? void 0 : wm.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(wm);
+        this.disconnectObservers();
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
+        this.restoreParentPosition();
+        this.container = null;
+        this.parent = null;
+        this.isOberserve = false;
     }
 }
 

package/lib/src/ui/data/index.js

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });