【解决todo】图片下载抽离到 download
parent
557dc7d5d9
commit
afcb7e76b7
|
@ -36,3 +36,22 @@ const download = {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default download
|
export default download
|
||||||
|
|
||||||
|
/** 图片下载(通过浏览器图片下载) */
|
||||||
|
export 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') as CanvasDrawImage
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -33,6 +33,7 @@ import ImageDetailDrawer from './ImageDetailDrawer.vue'
|
||||||
import ImageTaskCard from './ImageTaskCard.vue'
|
import ImageTaskCard from './ImageTaskCard.vue'
|
||||||
import { ElLoading, LoadingOptionsResolved } from 'element-plus'
|
import { ElLoading, LoadingOptionsResolved } from 'element-plus'
|
||||||
import { AiImageStatusEnum } from '@/views/ai/utils/constants'
|
import { AiImageStatusEnum } from '@/views/ai/utils/constants'
|
||||||
|
import { downloadImage } from '@/utils/download'
|
||||||
|
|
||||||
const message = useMessage() // 消息弹窗
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
|
@ -150,26 +151,6 @@ const handleImageMjBtnClick = async (button: ImageMjButtonsVO, imageDetail: Imag
|
||||||
await getImageList()
|
await getImageList()
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 下载 - image */
|
|
||||||
// TODO @fan:貌似可以考虑抽到 download 里面,作为一个方法
|
|
||||||
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') as CanvasDrawImage
|
|
||||||
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()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// page change
|
// page change
|
||||||
const handlePageChange = async (page) => {
|
const handlePageChange = async (page) => {
|
||||||
pageNo.value = page
|
pageNo.value = page
|
||||||
|
|
Loading…
Reference in New Issue