增加复制功能
This commit is contained in:
@@ -47,6 +47,32 @@ async function copyLink(name) {
|
|||||||
flash(await copyText(absUrl(name)) ? '链接已复制' : '复制失败')
|
flash(await copyText(absUrl(name)) ? '链接已复制' : '复制失败')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function copyImage(url) {
|
||||||
|
try {
|
||||||
|
const blob = await (await fetch(url)).blob()
|
||||||
|
const pngBlob = blob.type === 'image/png'
|
||||||
|
? blob
|
||||||
|
: await new Promise((resolve, reject) => {
|
||||||
|
createImageBitmap(blob).then(async (bitmap) => {
|
||||||
|
const canvas = document.createElement('canvas')
|
||||||
|
canvas.width = bitmap.width
|
||||||
|
canvas.height = bitmap.height
|
||||||
|
const ctx = canvas.getContext('2d')
|
||||||
|
if (!ctx) { reject(new Error('no canvas ctx')); return }
|
||||||
|
ctx.drawImage(bitmap, 0, 0)
|
||||||
|
canvas.toBlob((out) => {
|
||||||
|
if (out) resolve(out)
|
||||||
|
else reject(new Error('png convert failed'))
|
||||||
|
}, 'image/png')
|
||||||
|
}).catch(reject)
|
||||||
|
})
|
||||||
|
await navigator.clipboard.write([new ClipboardItem({ 'image/png': pngBlob })])
|
||||||
|
flash('图片已复制')
|
||||||
|
} catch {
|
||||||
|
flash('复制失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function copyPrompt(f) {
|
async function copyPrompt(f) {
|
||||||
if (!f.prompt) return
|
if (!f.prompt) return
|
||||||
flash(await copyText(f.prompt) ? '指令已复制' : '复制失败')
|
flash(await copyText(f.prompt) ? '指令已复制' : '复制失败')
|
||||||
@@ -168,6 +194,10 @@ onUnmounted(() => window.removeEventListener('keydown', onKey))
|
|||||||
|
|
||||||
<!-- quick actions, hover-revealed; same style as 首页内容 -->
|
<!-- quick actions, hover-revealed; same style as 首页内容 -->
|
||||||
<div class="absolute top-3 right-3 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
<div class="absolute top-3 right-3 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<button v-if="f.kind !== 'video'" @click.stop.prevent="copyImage(thumbUrl(f.name))" title="复制缩略图"
|
||||||
|
class="w-7 h-7 rounded-lg bg-black/50 ring-1 ring-white/10 hover:bg-black/70 text-white grid place-items-center">
|
||||||
|
<Icon name="copy" class="w-3.5 h-3.5" />
|
||||||
|
</button>
|
||||||
<a :href="generatedUrl(f.name)" :download="f.name.split('/').pop()" @click.stop title="下载"
|
<a :href="generatedUrl(f.name)" :download="f.name.split('/').pop()" @click.stop title="下载"
|
||||||
class="w-7 h-7 rounded-lg bg-black/50 ring-1 ring-white/10 hover:bg-black/70 text-white grid place-items-center">
|
class="w-7 h-7 rounded-lg bg-black/50 ring-1 ring-white/10 hover:bg-black/70 text-white grid place-items-center">
|
||||||
<Icon name="download" class="w-3.5 h-3.5" />
|
<Icon name="download" class="w-3.5 h-3.5" />
|
||||||
|
|||||||
@@ -272,6 +272,32 @@ async function copyPrompt(item) {
|
|||||||
flash(await copyText(text) ? '指令已复制' : '复制失败')
|
flash(await copyText(text) ? '指令已复制' : '复制失败')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function copyImage(url) {
|
||||||
|
try {
|
||||||
|
const blob = await (await fetch(url)).blob()
|
||||||
|
const pngBlob = blob.type === 'image/png'
|
||||||
|
? blob
|
||||||
|
: await new Promise((resolve, reject) => {
|
||||||
|
createImageBitmap(blob).then((bitmap) => {
|
||||||
|
const canvas = document.createElement('canvas')
|
||||||
|
canvas.width = bitmap.width
|
||||||
|
canvas.height = bitmap.height
|
||||||
|
const ctx = canvas.getContext('2d')
|
||||||
|
if (!ctx) { reject(new Error('no canvas ctx')); return }
|
||||||
|
ctx.drawImage(bitmap, 0, 0)
|
||||||
|
canvas.toBlob((out) => {
|
||||||
|
if (out) resolve(out)
|
||||||
|
else reject(new Error('png convert failed'))
|
||||||
|
}, 'image/png')
|
||||||
|
}).catch(reject)
|
||||||
|
})
|
||||||
|
await navigator.clipboard.write([new ClipboardItem({ 'image/png': pngBlob })])
|
||||||
|
flash('图片已复制')
|
||||||
|
} catch {
|
||||||
|
flash('复制失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// ---- generate (concurrent — no lock) ----
|
// ---- generate (concurrent — no lock) ----
|
||||||
// 生图 can request 1–4 images at once: each is an independent task/charge.
|
// 生图 can request 1–4 images at once: each is an independent task/charge.
|
||||||
const count = ref(1)
|
const count = ref(1)
|
||||||
@@ -686,6 +712,10 @@ onUnmounted(() => {
|
|||||||
<!-- hover action: 上参考图. Image → use as reference; video → 末帧设为首帧
|
<!-- hover action: 上参考图. Image → use as reference; video → 末帧设为首帧
|
||||||
(only shown when the model supports 首尾帧). Clicking the media zooms. -->
|
(only shown when the model supports 首尾帧). Clicking the media zooms. -->
|
||||||
<div class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
<div class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<button v-if="item.kind !== 'video'" @click.stop.prevent="copyImage(item.url + '.thumb.jpg')" title="复制缩略图"
|
||||||
|
class="w-7 h-7 rounded-lg bg-black/50 ring-1 ring-white/10 hover:bg-black/70 text-white grid place-items-center">
|
||||||
|
<Icon name="copy" class="w-3.5 h-3.5" />
|
||||||
|
</button>
|
||||||
<a :href="item.url" :download="(item.url || '').split('/').pop()" @click.stop title="下载"
|
<a :href="item.url" :download="(item.url || '').split('/').pop()" @click.stop title="下载"
|
||||||
class="w-7 h-7 rounded-lg bg-black/50 ring-1 ring-white/10 hover:bg-black/70 text-white grid place-items-center">
|
class="w-7 h-7 rounded-lg bg-black/50 ring-1 ring-white/10 hover:bg-black/70 text-white grid place-items-center">
|
||||||
<Icon name="download" class="w-3.5 h-3.5" />
|
<Icon name="download" class="w-3.5 h-3.5" />
|
||||||
|
|||||||
@@ -88,6 +88,33 @@ async function copyLink(name) {
|
|||||||
setTimeout(() => (toast.value = ''), 1500)
|
setTimeout(() => (toast.value = ''), 1500)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function copyImage(url) {
|
||||||
|
try {
|
||||||
|
const blob = await (await fetch(url)).blob()
|
||||||
|
const pngBlob = blob.type === 'image/png'
|
||||||
|
? blob
|
||||||
|
: await new Promise((resolve, reject) => {
|
||||||
|
createImageBitmap(blob).then((bitmap) => {
|
||||||
|
const canvas = document.createElement('canvas')
|
||||||
|
canvas.width = bitmap.width
|
||||||
|
canvas.height = bitmap.height
|
||||||
|
const ctx = canvas.getContext('2d')
|
||||||
|
if (!ctx) { reject(new Error('no canvas ctx')); return }
|
||||||
|
ctx.drawImage(bitmap, 0, 0)
|
||||||
|
canvas.toBlob((out) => {
|
||||||
|
if (out) resolve(out)
|
||||||
|
else reject(new Error('png convert failed'))
|
||||||
|
}, 'image/png')
|
||||||
|
}).catch(reject)
|
||||||
|
})
|
||||||
|
await navigator.clipboard.write([new ClipboardItem({ 'image/png': pngBlob })])
|
||||||
|
toast.value = '图片已复制'
|
||||||
|
} catch {
|
||||||
|
toast.value = '复制失败'
|
||||||
|
}
|
||||||
|
setTimeout(() => (toast.value = ''), 1500)
|
||||||
|
}
|
||||||
|
|
||||||
async function copyPrompt(e) {
|
async function copyPrompt(e) {
|
||||||
if (!e.prompt) return
|
if (!e.prompt) return
|
||||||
const ok = await copyText(e.prompt)
|
const ok = await copyText(e.prompt)
|
||||||
@@ -199,6 +226,10 @@ onUnmounted(() => {
|
|||||||
<!-- hover actions (only when there's a file) -->
|
<!-- hover actions (only when there's a file) -->
|
||||||
<div v-if="e.status === 'success' && e.file"
|
<div v-if="e.status === 'success' && e.file"
|
||||||
class="absolute top-3 right-3 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
class="absolute top-3 right-3 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<button v-if="e.kind !== 'video'" @click.stop.prevent="copyImage(thumbUrl(e.file))" title="复制缩略图"
|
||||||
|
class="w-7 h-7 rounded-lg bg-black/50 ring-1 ring-white/10 hover:bg-black/70 text-white grid place-items-center">
|
||||||
|
<Icon name="copy" class="w-3.5 h-3.5" />
|
||||||
|
</button>
|
||||||
<a :href="generatedUrl(e.file)" :download="e.file.split('/').pop()" @click.stop title="下载"
|
<a :href="generatedUrl(e.file)" :download="e.file.split('/').pop()" @click.stop title="下载"
|
||||||
class="w-7 h-7 rounded-lg bg-black/50 ring-1 ring-white/10 hover:bg-black/70 text-white grid place-items-center">
|
class="w-7 h-7 rounded-lg bg-black/50 ring-1 ring-white/10 hover:bg-black/70 text-white grid place-items-center">
|
||||||
<Icon name="download" class="w-3.5 h-3.5" />
|
<Icon name="download" class="w-3.5 h-3.5" />
|
||||||
|
|||||||
Reference in New Issue
Block a user