Vue LivePhoto(实况图片)渲染

Iceywu31

已于 2024-12-13 11:18:53 修改

阅读量789

点赞数 6

分类专栏：前端文章标签：前端 vue iphone

于 2024-11-06 15:12:39 首次发布

本文链接：https://blog.csdn.net/qq_45981967/article/details/143571026

版权

前端专栏收录该内容

5 篇文章

订阅专栏

前言

最近使用 iPhone 拍摄了一些实况照片，发现了一个很有意思的功能，LivePhoto，它可以将照片变成一个小视频，如果把这个特性应用到LifePalette-Web项目中，会不会很有趣呢？

探索 `LivePhoto`

网上对于 vue 实现LivePhoto的文章很少，搜索相关资料发现苹果官方提供了一个LivePhoto的js库，LivePhotoKit，它可以帮助我们实现LivePhoto的渲染，于是我就尝试使用这个库来实现LivePhoto的渲染

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
  </head>
  <body>
    <div
      data-live-photo
      data-photo-src="https://nest-js.oss-accelerate.aliyuncs.com/nestTest/1/1711965193523.JPEG"
      data-video-src="https://nest-js.oss-accelerate.aliyuncs.com/nestTest/1/1711965199299.MOV"
      style="width: 320px; height: 320px"
    ></div>
  </body>
</html>

由官网 demo 发现实况图片其实是由两部分组成的，一部分是图片，一部分是视频，图片和视频是一一对应的，这里我们可以通过data-photo-src和data-video-src来指定图片和视频的地址，这样就可以实现实况图片的渲染

在Vue中使用`LivePhoto`

官方提供了 livephotoskit.js 库，我们可以 npm 安装这个库

pnpm install livephotoskit

实现

<script setup>
import * as LivePhotosKit from 'livephotoskit'

const livePhotoRef = ref()
const fileInfo = {
    src: 'http://nest-js.oss-accelerate.aliyuncs.com/nestTest/1/1711965193523.JPEG',
    videoSrc: 'http://nest-js.oss-accelerate.aliyuncs.com/nestTest/1/1711965199299.MOV',
}
async function initLivePhoto() {
    await nextTick()
    const player = LivePhotosKit.Player(livePhotoRef.value)
    player.photoSrc = fileInfo.src
    player.videoSrc = fileInfo.videoSrc
}
onMounted(() => {
    initLivePhoto()
})
</script>

<template>
 <div ref="livePhotoRef" class="w-100 h-100" />
</template>

<style lang="less" scoped></style>