【增加】Image card 增加图片下载

Author: cherishsince

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})
 //

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,