From fdeedcfe7b111c941e4af7803f7665245dff6988 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 28 May 2024 11:35:02 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=A2=9E=E5=8A=A0=E3=80=91Image=20car?=
 =?UTF-8?q?d=20=E5=A2=9E=E5=8A=A0=E5=9B=BE=E7=89=87=E4=B8=8B=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/image/ImageTask.vue     | 24 ++++++++++++++++++++++++
 src/views/ai/image/ImageTaskCard.vue | 21 +++++++--------------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/views/ai/image/ImageTask.vue b/src/views/ai/image/ImageTask.vue
index 60cbbeb6..5e188865 100644
--- a/src/views/ai/image/ImageTask.vue
+++ b/src/views/ai/image/ImageTask.vue
@@ -66,8 +66,32 @@ const handlerImageBtnClick = async (type, imageDetail: ImageDetailVO) => {
     await ImageApi.deleteImage(imageDetail.id)
     await getImageList()
     await message.success("删除成功!")
+  } else if (type === 'download') {
+    downloadImage(imageDetail.picUrl)
   }
 }
+
+/**
+ * 下载 - image
+ */
+const downloadImage = async (imageUrl) => {
+  const image = new Image()
+  image.setAttribute('crossOrigin', 'anonymous')
+  image.src = imageUrl
+  image.onload = () => {
+    const canvas = document.createElement('canvas')
+    canvas.width = image.width
+    canvas.height = image.height
+    const ctx = canvas.getContext('2d')
+    ctx.drawImage(image, 0, 0, image.width, image.height)
+    const url = canvas.toDataURL('image/png')
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'image.png'
+    a.click()
+  }
+}
+
 //
 defineExpose({getImageList})
 //
diff --git a/src/views/ai/image/ImageTaskCard.vue b/src/views/ai/image/ImageTaskCard.vue
index 74ff34db..e3c0b79e 100644
--- a/src/views/ai/image/ImageTaskCard.vue
+++ b/src/views/ai/image/ImageTaskCard.vue
@@ -1,4 +1,3 @@
-
 <template>
   <el-card body-class="" class="image-card">
     <div class="image-operation">
@@ -8,13 +7,14 @@
         <el-button type="" text bg v-else-if="imageDetail.status === 'complete'">已完成</el-button>
       </div>
       <div>
-        <el-button class="btn" text :icon="Download" @click="handlerBtnClick('download', imageDetail)" />
-        <el-button class="btn" text :icon="Delete" @click="handlerBtnClick('delete', imageDetail)" />
-        <el-button class="btn" text :icon="More" @click="handlerBtnClick('more', imageDetail)" />
+        <el-button class="btn" text :icon="Download"
+                   @click="handlerBtnClick('download', imageDetail)"/>
+        <el-button class="btn" text :icon="Delete" @click="handlerBtnClick('delete', imageDetail)"/>
+        <el-button class="btn" text :icon="More" @click="handlerBtnClick('more', imageDetail)"/>
       </div>
     </div>
     <div class="image-wrapper" ref="cardImageRef">
-      <img class="image" :src="imageDetail?.picUrl" />
+      <img class="image" :src="imageDetail?.picUrl"/>
     </div>
   </el-card>
 </template>
@@ -37,22 +37,15 @@ const props = defineProps({
 /**
  * 按钮 - 点击事件
  */
-const handlerBtnClick = async (type, imageDetail: ImageDetailVO ) => {
+const handlerBtnClick = async (type, imageDetail: ImageDetailVO) => {
   emits('onBtnClick', type, imageDetail)
 }
 
-// 监听 imageDetail
-// const { imageDetail } = toRefs(props)
-// watch(imageDetail, async (newVal, oldValue) => {
-//   console.log('首次 watch')
-//
-// })
-
 // emits
 const emits = defineEmits(['onBtnClick'])
 
 //
-onMounted( async () => {
+onMounted(async () => {
   if (props.imageDetail.status === 'in_progress') {
     cardImageLoadingInstance.value = ElLoading.service({
       target: cardImageRef.value,