LivePhoto(实况图片)渲染

前言

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

探索 LivePhoto

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

html 复制代码
<!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="http://nest-js.oss-accelerate.aliyuncs.com/nestTest/1/1711965193523.JPEG"

      data-video-src="http://nest-js.oss-accelerate.aliyuncs.com/nestTest/1/1711965199299.MOV"

      style="width: 320px; height: 320px"

    ></div>

  </body>

</html>

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

在Vue中使用LivePhoto

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

bash 复制代码
pnpm install livephotoskit

实现

vue 复制代码
<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>

  

总结

通过这次探索,我们成功的实现了LivePhoto的渲染,这个功能可以让我们的项目更加有趣,如果你也对这个功能感兴趣,可以尝试一下

项目地址:LifePalette-Web

预览地址:LifePalette-Web

相关推荐
闲蛋小超人笑嘻嘻3 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
焚 城4 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
会写代码的饭桶4 小时前
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
vue.js·自动化·jenkins
被巨款砸中5 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略5 小时前
web vue之状态管理Pinia
前端·javascript·vue.js
mosen8685 小时前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
LuckySusu7 小时前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
LuckySusu8 小时前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu8 小时前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu8 小时前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js