Microi吾码-图片上传控件水印功能

图片上传控件

需要配合新增，图片水印接口引擎

上传前V8引擎事件，填入下方代码

// 图片上传控件 - 上传前 V8 事件
// 禁止原图上传，只上传并显示水印图

// ========== 1. 水印配置 ==========
const watermarkConfig = {
    text: '机密 - A项目',
    color: 'rgba(255, 0, 0, 0.3)',
    font: 'bold 24px "Microsoft YaHei"',
    margin: 20
};

// ========== 2. 工具函数 ==========
function fileToBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });
}

function addWatermarkToBase64(base64, config) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            ctx.font = config.font;
            ctx.fillStyle = config.color;
            ctx.textAlign = 'right';
            ctx.textBaseline = 'bottom';
            ctx.fillText(config.text, canvas.width - config.margin, canvas.height - config.margin);
            resolve(canvas.toDataURL('image/png'));
        };
        img.onerror = reject;
        img.src = base64;
    });
}

function base64ToBlob(base64Data) {
    const byteCharacters = atob(base64Data);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    return new Blob([new Uint8Array(byteNumbers)], { type: 'image/png' });
}

function uploadWatermarkedImage(base64, fileName) {
    return new Promise((resolve, reject) => {
        const base64Data = base64.split(',')[1];
        const blob = base64ToBlob(base64Data);
        const timestamp = new Date().getTime();
        const nameParts = fileName.split('.');
        const ext = nameParts.pop();
        const baseName = nameParts.join('.');
        const watermarkedFileName = `${baseName}_watermarked_${timestamp}.${ext}`;
        const file = new File([blob], watermarkedFileName, { type: 'image/png' });
        
        const formData = new FormData();
        formData.append('file', file);
        formData.append('Path', '/img');
        formData.append('Limit', false);
        formData.append('Preview', false);
        
        V8.Post({
            url: '/api/HDFS/Upload',
            data: formData,
            success: (result) => {
                if (result && result.Code === 1) {
                    resolve(result);
                } else {
                    reject(new Error(result?.Msg || '上传失败'));
                }
            },
            fail: reject
        });
    });
}

// ========== 3. 主流程 ==========
async function processUpload() {
    const originalFile = V8.ThisValue;
    const fieldName = 'YongpinTP';
    
    if (!originalFile) return false;
    
    // 判断是否多图片模式
    let isMultiple = false;
    try {
        if (V8.Field?.[fieldName]?.Config?.ImgUpload?.Multiple === true) {
            isMultiple = true;
        }
    } catch (e) {}
    
    // 获取已有图片
    let existingImages = [];
    if (isMultiple) {
        let val = V8.Form[fieldName];
        if (typeof val === 'string') {
            try { val = JSON.parse(val); } catch (e) { val = []; }
        }
        if (Array.isArray(val)) {
            existingImages = val.filter(item => item.State === 1);
        }
    }
    
    try {
        console.log('1. 处理水印:', originalFile.name);
        
        const base64 = await fileToBase64(originalFile);
        const watermarkedBase64 = await addWatermarkToBase64(base64, watermarkConfig);
        const uploadResult = await uploadWatermarkedImage(watermarkedBase64, originalFile.name);
        
        console.log('2. 水印上传成功');
        
        const data = uploadResult.Data || {};
        const fileObject = {
            Id: data.Id,
            State: 1,
            Name: data.Name || originalFile.name,
            Size: data.Size || originalFile.size,
            CreateTime: data.CreateTime || new Date().toISOString().replace('T', ' ').split('.')[0],
            Path: data.Path
        };
        
        // 更新字段
        if (isMultiple) {
            V8.Form[fieldName] = [...existingImages, fileObject];
        } else {
            V8.Form[fieldName] = JSON.stringify(fileObject);
        }
        
        // 设置 RealPath
        const fileServer = V8.SysConfig.FileServer || '';
        let realPath = data.Path;
        if (!realPath.startsWith('http') && fileServer) {
            realPath = fileServer + (realPath.startsWith('/') ? '' : '/') + realPath;
        }
        V8.Form[`${fieldName}_${data.Id}_RealPath`] = realPath;
        if (!isMultiple) {
            V8.Form[`${fieldName}_${fieldName}_RealPath`] = realPath;
        }
        
        // 刷新控件
        if (V8.FieldSet) {
            V8.FieldSet(fieldName, 'Value', V8.Form[fieldName]);
        }
        
        V8.Tips('水印添加成功', true);
        
    } catch (e) {
        console.error('失败:', e);
        V8.Tips('水印添加失败', false);
    }
    
    // 关键：返回 false 阻止控件上传原图
    return false;
}

// 执行
processUpload();