diff --git a/src/components/lowCode/assistant/lowcodeImage.vue b/src/components/lowCode/assistant/lowcodeImage.vue index 28384f5..1057788 100644 --- a/src/components/lowCode/assistant/lowcodeImage.vue +++ b/src/components/lowCode/assistant/lowcodeImage.vue @@ -53,7 +53,7 @@ const imgPath = ref(errimg) //文件上传的格式与大小 const beforeAvatarUpload = (rawFile) => { - imgLoading.value = true + //imgLoading.value = true // console.log("文件上传的格式与大小",rawFile.type) let imgType = ['image/jpeg','image/jpg','image/png','image/gif','image/svg'] if (!imgType.includes(rawFile.type)) { @@ -65,7 +65,13 @@ const beforeAvatarUpload = (rawFile) => { imgLoading.value = false return false } - return true + // + if(props.data.control.onSiteShot=='1'&&props.data.control.watermark=='1'){ + beforeUpload1(rawFile) + }else{ + return true + } + } //上传成功回调 const handleAvatarSuccess = ( @@ -157,11 +163,15 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => { //上传成功回调 -const handleAvatarSuccess1 = (response: any, uploadFile: any) => { +const handleAvatarSuccess1 = (response: any,uploadFile: any) => { // imageUrl.value = URL.createObjectURL(uploadFile.raw!) // console.log("上传成功回调", value); - /* console.log(response.data.url) - console.log(uploadFile) */ + /* console.log(response.data.url)*/ + console.log(uploadFile) + console.log(response.data.url) + uploadFile.url = response.data.url + + //file.url = response.data.url // let arrStr = '' props.data.control.uploadedImgs.forEach((element: { url: any; }) => { @@ -180,6 +190,60 @@ const handleAvatarSuccess1 = (response: any, uploadFile: any) => { imgLoading.value = false; }; + +const beforeUpload1 = (file) => { + + + return new Promise((resolve, reject) => { + const reader = new FileReader() + reader.readAsDataURL(file) + + reader.onload = (e) => { + const img = new Image() + img.src = e.target.result + + img.onload = () => { + const canvas = document.createElement('canvas') + const ctx = canvas.getContext('2d') + + // 设置 canvas 尺寸与图片一致 + canvas.width = img.width + canvas.height = img.height + ctx.drawImage(img, 0, 0) + + // 设置水印样式 + const fontSize = Math.max(canvas.width / 20, 16) // 自适应字体大小 + ctx.font = `${fontSize}px Arial` + ctx.fillStyle = 'rgba(155, 155, 155, 0.5)' // 红色半透明 + ctx.textAlign = 'right' + ctx.textBaseline = 'bottom' + + // 添加当前时间水印 + const now = new Date() + const timestamp = now.toLocaleString() // 如 "2025/9/4 13:11:20" + ctx.fillText(timestamp, canvas.width - 20, canvas.height - 20) + + // 将 canvas 转为 Blob,再转为 File + canvas.toBlob((blob) => { + const watermarkedFile = new File([blob], file.name, { + type: 'image/jpeg', // 可根据需要改为 image/png + lastModified: Date.now(), + }) + resolve(watermarkedFile) // 继续上传加水印的图片 + }, 'image/jpeg', 0.95) + } + + img.onerror = () => { + reject(new Error('图片加载失败')) + } + } + + reader.onerror = () => { + reject(new Error('文件读取失败')) + } + }) +} + const attrs = useAttrs() /* onMounted(()=>{ @@ -334,7 +398,7 @@ const toShow = ref(false) list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" - :before-upload="beforeAvatarUpload" + :before-upload="beforeUpload1" v-loading="imgLoading" :on-success="handleAvatarSuccess1" style="margin-top: 10px;"