From 2bf56a578915a3b4c6088939479779163ca3c975 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A6=85=E9=A5=BC?= <2815246336@qq.com> Date: Thu, 4 Sep 2025 20:45:49 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E9=99=A4=E5=8E=8B=E7=BC=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/work/inspection/scanSign/index.vue | 358 ++--------------------- 1 file changed, 28 insertions(+), 330 deletions(-) diff --git a/pages/work/inspection/scanSign/index.vue b/pages/work/inspection/scanSign/index.vue index 26e934a..3dfe19c 100644 --- a/pages/work/inspection/scanSign/index.vue +++ b/pages/work/inspection/scanSign/index.vue @@ -10,25 +10,9 @@ - - - - - - - × - - - - - + - 添加图片 - - - - 最多选择3张图片 - - + @@ -75,6 +59,7 @@ remark: "" }, img: [], + sourceType: ['camera'], imgFiles: "", msgType: '', messageText: '', @@ -105,130 +90,21 @@ }); }, - // 自定义图片选择方法 - chooseImage() { - if (this.isUploading) { - this.showMessage('warning', '图片正在上传中，请稍等'); - return; - } - - uni.chooseImage({ - count: 3 - this.img.length, // 最多选择剩余可选数量 - sizeType: ['compressed'], // 使用压缩图 - sourceType: ['camera'], // 只能拍照 - success: (res) => { - // 处理选择的图片 - res.tempFilePaths.forEach((filePath, index) => { - this.handleCustomImageUpload(filePath, res.tempFiles[index]); - }); - }, - fail: (err) => { - console.error('选择图片失败:', err); - this.showMessage('error', '选择图片失败'); - } - }); - }, - - // 删除自定义图片 - deleteCustomImg(index) { - if (index >= 0 && index < this.img.length) { - // 释放URL对象 - if (this.img[index].url && this.img[index].url.startsWith('blob:')) { - URL.revokeObjectURL(this.img[index].url); - } - + deleteImg(e) { + const index = this.img.findIndex(f => f.path === e.tempFile.path); + if (index !== -1) { this.form.ImgUrl.splice(index, 1); this.img.splice(index, 1); } }, - // 兼容旧的删除方法 - deleteImg(e) { - const index = this.img.findIndex(f => f.path === e.tempFile.path); - if (index !== -1) { - this.deleteCustomImg(index); - } - }, - - // 兼容旧的上传方法 upload(e) { if (e.tempFiles && e.tempFiles.length > 0) { this.handleImageUpload(e.tempFiles[0]); } }, - // 处理自定义图片上传 - async handleCustomImageUpload(filePath, fileInfo) { - this.isUploading = true; - - try { - // 将uni.chooseImage返回的文件转换为File对象 - const file = await this.convertToFile(filePath, fileInfo); - - // 生成水印文字 - const watermarkText = `${this.form.inspectionPoint || '未命名地点'} \n${this.getCurrentDate()}`; - // 添加水印 - let processedFile = await addWatermarkToImage(file, watermarkText); - - // 不进行额外压缩，使用系统自带压缩 - - // 上传处理后的文件 - const fileUrl = await this.uploadFile(processedFile); - - // 更新UI显示 - this.img.push({ - raw: processedFile, - name: processedFile.name, - url: fileUrl, - path: filePath - }); - - } catch (error) { - console.error("图片处理失败:", error); - this.showMessage('error', `图片处理失败: ${error.message}`); - } finally { - this.isUploading = false; - } - }, - - // 将uni.chooseImage的结果转换为File对象 - async convertToFile(filePath, fileInfo) { - return new Promise((resolve, reject) => { - // 在uni-app中，可以直接使用filePath创建File对象 - // 对于H5平台，需要特殊处理 - // #ifdef H5 - const xhr = new XMLHttpRequest(); - xhr.open('GET', filePath, true); - xhr.responseType = 'blob'; - xhr.onload = function() { - if (xhr.status === 200) { - const blob = xhr.response; - const file = new File([blob], fileInfo.name || 'image.jpg', { - type: fileInfo.type || 'image/jpeg' - }); - resolve(file); - } else { - reject(new Error('文件读取失败')); - } - }; - xhr.onerror = () => reject(new Error('文件读取失败')); - xhr.send(); - // #endif - - // #ifndef H5 - // 对于非H5平台，创建一个模拟的File对象 - const file = { - name: fileInfo.name || 'image.jpg', - type: fileInfo.type || 'image/jpeg', - size: fileInfo.size || 0, - path: filePath, - lastModified: Date.now() - }; - resolve(file); - // #endif - }); - }, cancel() { uni.reLaunch({ @@ -240,126 +116,32 @@ return this.form.ImgUrl.join(','); }, - // 处理原有的图片上传（兼容uni-file-picker） - async handleImageUpload(file) { + handleImageUpload(file) { + if (this.isUploading) { + this.showMessage('warning', '图片正在上传中，请稍等'); + return; + } + this.isUploading = true; - try { - if (!file || !file.file) { - throw new Error('无效的文件对象'); - } - - // 生成水印文字 - const watermarkText = `${this.form.inspectionPoint || '未命名地点'} \n${this.getCurrentDate()}`; - - // 添加水印 - let processedFile = await addWatermarkToImage(file.file, watermarkText); - - // 不进行额外压缩，使用系统自带压缩 - - // 上传处理后的文件 - const fileUrl = await this.uploadFile(processedFile); - - // 更新UI显示 - this.img.push({ - raw: processedFile, - name: processedFile.name, - url: fileUrl - }); - - } catch (error) { - console.error("图片处理失败:", error); - this.showMessage('error', `图片处理失败: ${error.message}`); - } finally { - this.isUploading = false; - } - }, - - // 通用图片压缩方法 - compressImage(file, quality = 0.7, maxWidth = 1200, maxHeight = 1200) { - return new Promise((resolve, reject) => { - // 如果文件小于200KB，直接返回 - if (file.size < 200 * 1024) { - console.log('文件较小，无需压缩'); - resolve(file); - return; - } - - console.log('原始文件大小:', (file.size / 1024).toFixed(2), 'KB'); - - const img = new Image(); - const reader = new FileReader(); - - reader.onload = (event) => { - img.onload = () => { - // 计算压缩比例 - let width = img.width; - let height = img.height; - - // 限制最大尺寸 - if (width > maxWidth || height > maxHeight) { - const ratio = Math.min(maxWidth / width, maxHeight / height); - width = Math.floor(width * ratio); - height = Math.floor(height * ratio); - } - - // 创建canvas - const canvas = document.createElement('canvas'); - canvas.width = width; - canvas.height = height; - - const ctx = canvas.getContext('2d'); - - // 设置更高的压缩质量 - ctx.imageSmoothingQuality = 'high'; - ctx.drawImage(img, 0, 0, width, height); - - // 使用toBlob进行压缩 - if (canvas.toBlob) { - canvas.toBlob( - (blob) => { - if (!blob) { - console.warn('压缩失败，返回原始文件'); - resolve(file); - return; - } - - // 创建压缩后的文件对象 - const compressedFile = new File([blob], file.name, { - type: 'image/jpeg', - lastModified: Date.now() - }); - - console.log('压缩后文件大小:', (compressedFile.size / 1024).toFixed(2), 'KB'); - resolve(compressedFile); - }, - 'image/jpeg', - quality - ); - } else { - // 不支持toBlob的浏览器直接返回原文件 - console.warn('浏览器不支持toBlob方法，无法压缩'); - resolve(file); - } - }; - - img.onerror = () => { - console.warn('图片加载失败，返回原始文件'); - resolve(file); - }; - - img.src = event.target.result; - }; - - reader.onerror = () => { - console.warn('文件读取失败，返回原始文件'); - resolve(file); - }; - - reader.readAsDataURL(file); + // 添加水印 + this.addWatermarkToImage(file, (watermarkedFile) => { + // 检查是否为移动浏览器且文件大小大于300KB + // if (this.checkMobileBrowser() && watermarkedFile.size > 300 * 1024) { + // 压缩图片 + // this.compressImageForMobile(watermarkedFile, (compressedFile) => { + // 上传文件 + // this.uploadFile(compressedFile); + // }); + // } else { + // 直接上传 + this.uploadFile(watermarkedFile); + // } }); }, + + // 专门为移动浏览器优化的压缩方法（保留兼容性） compressImageForMobile(file, quality = 0.6, maxWidth = 1200, maxHeight = 1200) { return new Promise((resolve, reject) => { @@ -547,89 +329,5 @@ /* 可能还需要设置一些其他的样式来确保按钮看起来正确，比如 text-align, padding 等 */ } - /* 自定义图片选择器样式 */ - .custom-image-picker { - width: 100%; - } - .image-preview-container { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-bottom: 10px; - } - - .image-preview-item { - position: relative; - width: 80px; - height: 80px; - border-radius: 8px; - overflow: hidden; - border: 1px solid #e0e0e0; - } - - .preview-image { - width: 100%; - height: 100%; - object-fit: cover; - } - - .delete-btn { - position: absolute; - top: -5px; - right: -5px; - width: 20px; - height: 20px; - background-color: #ff4757; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - } - - .delete-icon { - color: white; - font-size: 14px; - font-weight: bold; - line-height: 1; - } - - .add-image-btn { - width: 80px; - height: 80px; - border: 2px dashed #c0c0c0; - border-radius: 8px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - cursor: pointer; - background-color: #fafafa; - transition: all 0.3s ease; - } - - .add-image-btn:hover { - border-color: #007aff; - background-color: #f0f8ff; - } - - .add-icon { - font-size: 24px; - color: #c0c0c0; - margin-bottom: 4px; - } - - .add-text { - font-size: 12px; - color: #999; - } - - .image-tip { - font-size: 12px; - color: #666; - text-align: center; - margin-top: 5px; - } \ No newline at end of file