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 @@ - @@ -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,