forked from natuka/web.puabadge.com
抖店下载图片
This commit is contained in:
1 parent
5e0ce4b4b5
commit
394d1a48fd
1 file changed
+16
-13
+16
-13
@@ -114,13 +114,13 @@
|
|||||||
<div style="padding: 16px;">
|
<div style="padding: 16px;">
|
||||||
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
|
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
|
||||||
<div style="text-align: center;">
|
<div style="text-align: center;">
|
||||||
<img :src="compareList.origin_path" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
|
<img :src="compareList.origin_path" alt="原图" style="width: 120px; height: 120px; border-radius: 8px;">
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size: 24px; color: #333;">
|
<div style="font-size: 24px; color: #333;">
|
||||||
<van-icon name="arrow" size="20px" />
|
<van-icon name="arrow" size="20px" />
|
||||||
</div>
|
</div>
|
||||||
<div style="text-align: center;">
|
<div style="text-align: center;">
|
||||||
<img :src="imageUrl" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
|
<img :src="imageUrl" alt="效果图" style="width: 120px; height: 120px; border-radius: 8px;">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
|
<div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
|
||||||
@@ -135,13 +135,13 @@
|
|||||||
<div style="padding: 16px;">
|
<div style="padding: 16px;">
|
||||||
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
|
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
|
||||||
<div style="text-align: center;">
|
<div style="text-align: center;">
|
||||||
<img :src="compareList.origin_path" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
|
<img :src="compareList.origin_path" alt="原图" style="width: 120px; height: 120px; border-radius: 8px;">
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size: 24px; color: #333;">
|
<div style="font-size: 24px; color: #333;">
|
||||||
<van-icon name="plus" size="20px" />
|
<van-icon name="plus" size="20px" />
|
||||||
</div>
|
</div>
|
||||||
<div style="text-align: center;">
|
<div style="text-align: center;">
|
||||||
<img :src="compareList.extend_path" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
|
<img :src="compareList.extend_path" alt="背景图" style="width: 120px; height: 120px; border-radius: 8px;">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size: 24px; color: #333;display: flex; align-items: center; justify-content: center; margin: 16px 0;">
|
<div style="font-size: 24px; color: #333;display: flex; align-items: center; justify-content: center; margin: 16px 0;">
|
||||||
@@ -149,7 +149,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
|
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
|
||||||
<div style="text-align: center;">
|
<div style="text-align: center;">
|
||||||
<img :src="imageUrl" :alt="compareList.kind_name" style="width: 120px; height: 120px; border-radius: 8px;">
|
<img :src="imageUrl" alt="效果图" style="width: 120px; height: 120px; border-radius: 8px;">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
|
<div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
|
||||||
@@ -257,18 +257,21 @@ const createLog = () => {
|
|||||||
function save() {
|
function save() {
|
||||||
// 下载图片到本地
|
// 下载图片到本地
|
||||||
const downloadImage = (url: string) => {
|
const downloadImage = (url: string) => {
|
||||||
const link = document.createElement('a')
|
try {
|
||||||
link.href = url
|
const link = document.createElement('a')
|
||||||
link.download = '徽章效果图.png'
|
link.href = url
|
||||||
document.body.appendChild(link)
|
link.download = '徽章效果图.png'
|
||||||
link.click()
|
document.body.appendChild(link)
|
||||||
document.body.removeChild(link)
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
} catch (err) {
|
||||||
|
window.open(url, '_blank');
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (imageUrl.value) {
|
if (imageUrl.value) {
|
||||||
downloadImage(imageUrl.value)
|
downloadImage(imageUrl.value)
|
||||||
} else {
|
|
||||||
showReload.value = true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const compareList = ref({})
|
const compareList = ref({})
|
||||||
|
|||||||
Reference in new issue
Block a user