Support copy image (#4806)

This commit is contained in:
the1812 2024-07-12 22:44:05 +08:00
parent 2da58cef98
commit 560d651d35
4 changed files with 36 additions and 15 deletions

View File

@ -74,7 +74,7 @@
## 最低配置
- 操作系统: Windows 8.1 / macOS Big Sur
- 分辨率: 1920x1080, 缩放 125%
- 浏览器: Chrome 105+ / Firefox 121+ / Safari 15.4+ (仅理论上能运行, 没测试过)
- 浏览器: Chrome 105+ / Firefox 127+ / Safari 15.4+ (仅理论上能运行, 没测试过)
- 处理器: Intel Core i5-10500 / AMD Ryzen 5 3600
- 内存: 8GB
- 脚本管理器: Tampermonkey 5.0 / Violentmonkey 2.18
@ -84,7 +84,7 @@
## 推荐配置
- 操作系统: Windows 10 / macOS Sonoma
- 分辨率: 3840x2160, 缩放 200%
- 浏览器: Chrome 120+ / Firefox 121+
- 浏览器: Chrome 120+ / Firefox 127+
- 处理器: Intel Core i7-11700 / AMD Ryzen 7 5800
- 内存: 32GB
- 脚本管理器: Tampermonkey 5.0 / Violentmonkey 2.18

View File

@ -13,7 +13,10 @@
<button class="save" title="保存" @click="save">
<VIcon :size="28" icon="mdi-content-save-outline"></VIcon>
</button>
<button title="丢弃" class="discard" @click="discard">
<button class="copy" title="复制" @click="copy">
<VIcon :size="24" :icon="showCopyTip ? 'mdi-check' : 'mdi-content-copy'"></VIcon>
</button>
<button class="discard" title="丢弃" @click="discard">
<VIcon :size="28" icon="mdi-delete-forever-outline"></VIcon>
</button>
<span class="time">{{ time }}</span>
@ -23,29 +26,48 @@
</template>
<script lang="ts">
import { VIcon } from '@/ui'
import { Screenshot } from './screenshot'
export default Vue.extend({
components: {
VIcon,
},
props: {
objectUrl: {
type: String,
screenshot: {
type: Screenshot,
required: true,
},
filename: {
type: String,
required: true,
},
data() {
return {
showCopyTip: false,
}
},
computed: {
objectUrl() {
return this.screenshot.url
},
time: {
type: String,
required: true,
filename() {
return this.screenshot.filename
},
time() {
return this.screenshot.time
},
},
methods: {
discard() {
this.$emit('discard')
},
async copy() {
const screenshot = this.screenshot as Screenshot
await navigator.clipboard.write([
new ClipboardItem({ [screenshot.mimeType]: screenshot.blob }),
])
this.showCopyTip = true
setTimeout(() => {
this.showCopyTip = false
}, 1000)
},
save() {
const link = this.$refs.link as HTMLAnchorElement
link.addEventListener(

View File

@ -4,9 +4,7 @@
<VideoScreenshot
v-for="screenshot of screenshots"
:key="screenshot.id"
:filename="screenshot.filename"
:object-url="screenshot.url"
:time="screenshot.time"
:screenshot="screenshot"
@discard="discard(screenshot)"
></VideoScreenshot>
</transition-group>

View File

@ -3,6 +3,7 @@ import { getFriendlyTitle } from '@/core/utils/title'
const canvas = document.createElement('canvas')
export class Screenshot {
readonly mimeType = 'image/png'
url = ''
blob: Blob
timeStamp = new Date().getTime()
@ -57,7 +58,7 @@ export class Screenshot {
}
this.blob = blob
this.url = URL.createObjectURL(blob)
}, 'image/png')
}, this.mimeType)
} catch (error) {
logError(
'视频截图失败: 操作被浏览器阻止. 这通常发生于电影的试看片段, 请在正片尝试使用截图功能.',