水印

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
   }
+  //
+  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;"