【解决todo】图片下载抽离到 download
parent
557dc7d5d9
commit
afcb7e76b7
|
@ -36,3 +36,22 @@ const 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 { ElLoading, LoadingOptionsResolved } from 'element-plus'
|
||||
import { AiImageStatusEnum } from '@/views/ai/utils/constants'
|
||||
import { downloadImage } from '@/utils/download'
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
|
@ -150,26 +151,6 @@ const handleImageMjBtnClick = async (button: ImageMjButtonsVO, imageDetail: Imag
|
|||
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
|
||||
const handlePageChange = async (page) => {
|
||||
pageNo.value = page
|
||||
|
|
Loading…
Reference in New Issue