H5 洋火人科目三和GitHub获取仓库点星星的用户列表发生了艺术的碰撞 ...

吴旭华  金牌会员 | 2025-3-21 13:55:47 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 988|帖子 988|积分 2964

先看结果，代码写的比较乱，有待优化
  结果

https://linyisonger.github.io/H5.Examples/?name=./089.%E7%9C%8B%E6%98%9F%E6%98%9F%E7%9A%84%E8%88%9E%E8%80%85.html

思绪

看起来很简朴，实则也不是很难，就是必要思绪要打开。
一开始的流程思绪是
思绪一


  • 通过视频获取骨骼节点动画 ✔
  • 利用AI文生图+骨骼节点生成人物信息 ❌ 结果不达预期
  • 确定人物头部位置+序列帧动画
思绪二


  • 通过视频获取骨骼节点动画 ✔
  • 通过骨骼动画进行canvas渲染，节点毗连从而打到洋火人的结果。✔
  • 确定人物头部位置+序列帧动画 ❌ 画布太大无法渲染一张图
  • 确定人物头部位置+序列帧动画 + JSON存储 ✔
实现


  • 通过视频播放+requestAnimationFrame获取每帧图片
  • 通过@tensorflow/tfjs+@tensorflow-models/posenet来获取图片骨骼节点
  • 通过canvas进行骨骼毗连
这又是一篇新的内容，AI方面不是很了解，只是看着教程做的。
https://linyisonger.github.io/H5.Examples/?name=./090.%E7%81%AB%E6%9F%B4%E4%BA%BA%E7%94%9F%E6%88%90%E5%99%A8.html

上传视频后输出的JSON文件是这个示例所必要的。
内里包含每一帧的洋火人Base64图片，头像应该放置的位置。
代码

获取GitHub仓库点星星的用户列表
   ⚠ 当然这不是很好的写法，一旦出现报错就是死循环
  1. /**
  2. * 获取star的用户 默认30一页
  3. * @author          linyisonger
  4. * @date          2025-02-18
  5. */
  6. async function getStargazers(page = 1) {
  7.     const result = await fetch(`https://api.github.com/repos/linyisonger/H5.Examples/stargazers?page=${page}`)
  8.     return await result.json()
  9. }
  11. /**
  12. * 获取所有star的用户
  13. * @author          linyisonger
  14. * @date          2025-02-18
  15. */
  16. async function getAllStargazers(page = 1, users = []) {
  17.     let stargazers = await getStargazers(page)
  18.     users = users.concat(stargazers)
  19.     if (stargazers.length < 30) return users
  20.     return await getAllStargazers(page + 1, users)
  21. }
复制代码
其他的感觉没什么重点
完备代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <link rel="stylesheet" href="./assets/global.css">
  10.     <style>
  11.         #container {
  12.             display: flex;
  13.             justify-content: center;
  14.             align-items: center;
  15.             flex-wrap: wrap;
  16.             height: 100vh;
  17.             align-content: center;
  18.             position: relative;
  19.         }
  21.         #container canvas {
  22.             margin-top: -140px
  23.         }
  25.         .welcome-statement {
  26.             position: absolute;
  27.             top: 100px;
  28.             font-size: 40px;
  29.             color: #999;
  30.         }
  32.         .join-us {
  33.             position: absolute;
  34.             bottom: 200px;
  35.             z-index: 100;
  36.             display: inline-flex;
  37.             padding: 0 20px 3px;
  38.             line-height: 40px;
  39.             background: linear-gradient(to bottom, rgb(87, 196, 245), rgb(26, 147, 206));
  40.             color: rgb(254, 252, 255);
  41.             cursor: pointer;
  42.             border-radius: 4px;
  43.             font-weight: bold;
  44.             box-shadow: inset 0px -3px 0 rgb(19, 98, 139);
  45.         }
  47.         .join-us:active {
  48.             opacity: .7;
  49.             box-shadow: inset 0px 0px 0 transparent;
  50.         }
  52.         .bgm-controller {
  53.             position: absolute;
  54.             right: 20px;
  55.             top: 20px;
  56.             width: 40px;
  57.         }
  59.         .bgm-controller:active {
  60.             opacity: .7;
  61.         }
  62.     </style>
  63. </head>
  65. <body>
  66.     <div id="container">
  67.         <!-- <audio class="bgm" muted="true">
  68.             <source src="./assets/dance/swing-dance.mp3" />
  69.         </audio> -->
  70.         <video class="bgm" muted style="display: none;">
  71.             <source src="./assets/dance/kemusan.mp4" />
  72.         </video>
  75.         <div class="welcome-statement">感谢各位给 H5.Examples 点⭐⭐~</div>
  77.         <a class="join-us" href="https://github.com/linyisonger/H5.Examples">
  78.             加入我们
  79.         </a>
  82.         <img class="bgm-controller" src="./assets/dance/bgm-c.png">
  84.     </div>
  85.     <script type="module">
  86.         /**
  87.          * 加载图
  88.          * @param {string} src
  89.          * @returns {Promise<HTMLImageElement>}
  90.          */
  91.         function loadImage(src) {
  92.             return new Promise((resolve) => {
  93.                 let image = new Image()
  94.                 image.src = src;
  95.                 image.onload = (ev) => {
  96.                     resolve(image)
  97.                 }
  98.             })
  99.         }
  101.         /**
  102.          * 加载音乐
  103.          * @param {string} src
  104.          * @returns {Promise<HTMLImageElement>}
  105.          */
  106.         function loadAudio(src) {
  107.             return new Promise((resolve) => {
  108.                 let audio = new Audio(src)
  109.                 audio.addEventListener("loadeddata", resolve)
  110.             })
  111.         }
  113.         /**
  114.          * 获取star的用户 默认30一页
  115.          * @author          linyisonger
  116.          * @date          2025-02-18
  117.          */
  118.         async function getStargazers(page = 1) {
  119.             const result = await fetch(`https://api.github.com/repos/linyisonger/H5.Examples/stargazers?page=${page}`)
  120.             return await result.json()
  121.         }
  123.         /**
  124.          * 获取所有star的用户
  125.          * @author          linyisonger
  126.          * @date          2025-02-18
  127.          */
  128.         async function getAllStargazers(page = 1, users = []) {
  129.             let stargazers = await getStargazers(page)
  130.             users = users.concat(stargazers)
  131.             if (stargazers.length < 30) return users
  132.             return await getAllStargazers(page + 1, users)
  133.         }
  137.         // getAllStargazers().then((res) => {
  138.         //     console.log("获取star的用户", res);
  139.         // })
  141.         let dancers = [
  142.             {
  143.                 "login": "AnChangSu",
  144.                 "id": 5037050,
  145.                 "node_id": "MDQ6VXNlcjUwMzcwNTA=",
  146.                 "avatar_url": "https://avatars.githubusercontent.com/u/5037050?v=4",
  147.                 "gravatar_id": "",
  148.                 "url": "https://api.github.com/users/AnChangSu",
  149.                 "html_url": "https://github.com/AnChangSu",
  150.                 "followers_url": "https://api.github.com/users/AnChangSu/followers",
  151.                 "following_url": "https://api.github.com/users/AnChangSu/following{/other_user}",
  152.                 "gists_url": "https://api.github.com/users/AnChangSu/gists{/gist_id}",
  153.                 "starred_url": "https://api.github.com/users/AnChangSu/starred{/owner}{/repo}",
  154.                 "subscriptions_url": "https://api.github.com/users/AnChangSu/subscriptions",
  155.                 "organizations_url": "https://api.github.com/users/AnChangSu/orgs",
  156.                 "repos_url": "https://api.github.com/users/AnChangSu/repos",
  157.                 "events_url": "https://api.github.com/users/AnChangSu/events{/privacy}",
  158.                 "received_events_url": "https://api.github.com/users/AnChangSu/received_events",
  159.                 "type": "User",
  160.                 "user_view_type": "public",
  161.                 "site_admin": false
  162.             },
  163.             {
  164.                 "login": "HGinGitHub",
  165.                 "id": 103415496,
  166.                 "node_id": "U_kgDOBin-yA",
  167.                 "avatar_url": "https://avatars.githubusercontent.com/u/103415496?v=4",
  168.                 "gravatar_id": "",
  169.                 "url": "https://api.github.com/users/HGinGitHub",
  170.                 "html_url": "https://github.com/HGinGitHub",
  171.                 "followers_url": "https://api.github.com/users/HGinGitHub/followers",
  172.                 "following_url": "https://api.github.com/users/HGinGitHub/following{/other_user}",
  173.                 "gists_url": "https://api.github.com/users/HGinGitHub/gists{/gist_id}",
  174.                 "starred_url": "https://api.github.com/users/HGinGitHub/starred{/owner}{/repo}",
  175.                 "subscriptions_url": "https://api.github.com/users/HGinGitHub/subscriptions",
  176.                 "organizations_url": "https://api.github.com/users/HGinGitHub/orgs",
  177.                 "repos_url": "https://api.github.com/users/HGinGitHub/repos",
  178.                 "events_url": "https://api.github.com/users/HGinGitHub/events{/privacy}",
  179.                 "received_events_url": "https://api.github.com/users/HGinGitHub/received_events",
  180.                 "type": "User",
  181.                 "user_view_type": "public",
  182.                 "site_admin": false
  183.             },
  184.             {
  185.                 "login": "harris2012",
  186.                 "id": 12846977,
  187.                 "node_id": "MDQ6VXNlcjEyODQ2OTc3",
  188.                 "avatar_url": "https://avatars.githubusercontent.com/u/12846977?v=4",
  189.                 "gravatar_id": "",
  190.                 "url": "https://api.github.com/users/harris2012",
  191.                 "html_url": "https://github.com/harris2012",
  192.                 "followers_url": "https://api.github.com/users/harris2012/followers",
  193.                 "following_url": "https://api.github.com/users/harris2012/following{/other_user}",
  194.                 "gists_url": "https://api.github.com/users/harris2012/gists{/gist_id}",
  195.                 "starred_url": "https://api.github.com/users/harris2012/starred{/owner}{/repo}",
  196.                 "subscriptions_url": "https://api.github.com/users/harris2012/subscriptions",
  197.                 "organizations_url": "https://api.github.com/users/harris2012/orgs",
  198.                 "repos_url": "https://api.github.com/users/harris2012/repos",
  199.                 "events_url": "https://api.github.com/users/harris2012/events{/privacy}",
  200.                 "received_events_url": "https://api.github.com/users/harris2012/received_events",
  201.                 "type": "User",
  202.                 "user_view_type": "public",
  203.                 "site_admin": false
  204.             },
  205.             {
  206.                 "login": "Lavenir7",
  207.                 "id": 105573717,
  208.                 "node_id": "U_kgDOBkrtVQ",
  209.                 "avatar_url": "https://avatars.githubusercontent.com/u/105573717?v=4",
  210.                 "gravatar_id": "",
  211.                 "url": "https://api.github.com/users/Lavenir7",
  212.                 "html_url": "https://github.com/Lavenir7",
  213.                 "followers_url": "https://api.github.com/users/Lavenir7/followers",
  214.                 "following_url": "https://api.github.com/users/Lavenir7/following{/other_user}",
  215.                 "gists_url": "https://api.github.com/users/Lavenir7/gists{/gist_id}",
  216.                 "starred_url": "https://api.github.com/users/Lavenir7/starred{/owner}{/repo}",
  217.                 "subscriptions_url": "https://api.github.com/users/Lavenir7/subscriptions",
  218.                 "organizations_url": "https://api.github.com/users/Lavenir7/orgs",
  219.                 "repos_url": "https://api.github.com/users/Lavenir7/repos",
  220.                 "events_url": "https://api.github.com/users/Lavenir7/events{/privacy}",
  221.                 "received_events_url": "https://api.github.com/users/Lavenir7/received_events",
  222.                 "type": "User",
  223.                 "user_view_type": "public",
  224.                 "site_admin": false
  225.             },
  226.             {
  227.                 "login": "linyisonger",
  228.                 "id": 34770610,
  229.                 "node_id": "MDQ6VXNlcjM0NzcwNjEw",
  230.                 "avatar_url": "https://avatars.githubusercontent.com/u/34770610?v=4",
  231.                 "gravatar_id": "",
  232.                 "url": "https://api.github.com/users/linyisonger",
  233.                 "html_url": "https://github.com/linyisonger",
  234.                 "followers_url": "https://api.github.com/users/linyisonger/followers",
  235.                 "following_url": "https://api.github.com/users/linyisonger/following{/other_user}",
  236.                 "gists_url": "https://api.github.com/users/linyisonger/gists{/gist_id}",
  237.                 "starred_url": "https://api.github.com/users/linyisonger/starred{/owner}{/repo}",
  238.                 "subscriptions_url": "https://api.github.com/users/linyisonger/subscriptions",
  239.                 "organizations_url": "https://api.github.com/users/linyisonger/orgs",
  240.                 "repos_url": "https://api.github.com/users/linyisonger/repos",
  241.                 "events_url": "https://api.github.com/users/linyisonger/events{/privacy}",
  242.                 "received_events_url": "https://api.github.com/users/linyisonger/received_events",
  243.                 "type": "User",
  244.                 "user_view_type": "public",
  245.                 "site_admin": false
  246.             },
  247.             {
  248.                 "login": "lpleipeng",
  249.                 "id": 39250004,
  250.                 "node_id": "MDQ6VXNlcjM5MjUwMDA0",
  251.                 "avatar_url": "https://avatars.githubusercontent.com/u/39250004?v=4",
  252.                 "gravatar_id": "",
  253.                 "url": "https://api.github.com/users/lpleipeng",
  254.                 "html_url": "https://github.com/lpleipeng",
  255.                 "followers_url": "https://api.github.com/users/lpleipeng/followers",
  256.                 "following_url": "https://api.github.com/users/lpleipeng/following{/other_user}",
  257.                 "gists_url": "https://api.github.com/users/lpleipeng/gists{/gist_id}",
  258.                 "starred_url": "https://api.github.com/users/lpleipeng/starred{/owner}{/repo}",
  259.                 "subscriptions_url": "https://api.github.com/users/lpleipeng/subscriptions",
  260.                 "organizations_url": "https://api.github.com/users/lpleipeng/orgs",
  261.                 "repos_url": "https://api.github.com/users/lpleipeng/repos",
  262.                 "events_url": "https://api.github.com/users/lpleipeng/events{/privacy}",
  263.                 "received_events_url": "https://api.github.com/users/lpleipeng/received_events",
  264.                 "type": "User",
  265.                 "user_view_type": "public",
  266.                 "site_admin": false
  267.             },
  268.             {
  269.                 "login": "xxxggg-ctrl",
  270.                 "id": 63829555,
  271.                 "node_id": "MDQ6VXNlcjYzODI5NTU1",
  272.                 "avatar_url": "https://avatars.githubusercontent.com/u/63829555?v=4",
  273.                 "gravatar_id": "",
  274.                 "url": "https://api.github.com/users/xxxggg-ctrl",
  275.                 "html_url": "https://github.com/xxxggg-ctrl",
  276.                 "followers_url": "https://api.github.com/users/xxxggg-ctrl/followers",
  277.                 "following_url": "https://api.github.com/users/xxxggg-ctrl/following{/other_user}",
  278.                 "gists_url": "https://api.github.com/users/xxxggg-ctrl/gists{/gist_id}",
  279.                 "starred_url": "https://api.github.com/users/xxxggg-ctrl/starred{/owner}{/repo}",
  280.                 "subscriptions_url": "https://api.github.com/users/xxxggg-ctrl/subscriptions",
  281.                 "organizations_url": "https://api.github.com/users/xxxggg-ctrl/orgs",
  282.                 "repos_url": "https://api.github.com/users/xxxggg-ctrl/repos",
  283.                 "events_url": "https://api.github.com/users/xxxggg-ctrl/events{/privacy}",
  284.                 "received_events_url": "https://api.github.com/users/xxxggg-ctrl/received_events",
  285.                 "type": "User",
  286.                 "user_view_type": "public",
  287.                 "site_admin": false
  288.             }
  289.         ]
  292.         let bgmControllerDom = document.querySelector('.bgm-controller')
  293.         bgmControllerDom.addEventListener("click", () => {
  294.             const bgm = document.body.querySelector('.bgm')
  295.             bgm.muted = !bgm.muted;
  296.             bgmControllerDom.setAttribute('src', bgm.muted ? './assets/dance/bgm-c.png' : './assets/dance/bgm-o.png')
  297.         })
  299.         // 2D火柴人 贴图
  301.         function fetchLoad(url) {
  302.             return new Promise((resolve) => {
  303.                 fetch(url).then((response) => response.json()).then(resolve)
  304.             })
  305.         }
  307.         async function initGame() {
  308.             dancers = await getAllStargazers()
  309.             let dance = await fetchLoad("./assets/dance/kemusan.json")
  310.             const DROP_FRAME = 5 // 抽帧
  311.             const ZOOM_OUT = .5
  312.             // 检查动作信息
  313.             // for (let i = 0; i < dance.frames.length; i++) {
  314.             //     console.log(i);
  315.             //     const frame = dance.frames[i];
  316.             //     const img = document.createElement('img')
  317.             //     img.src = frame.url;
  318.             //     document.body.appendChild(img)
  319.             // }
  321.             let danceCvsList = []
  322.             for (let i = 0; i < dancers.length; i++) {
  323.                 const dancer = dancers[i];
  324.                 let danceCvs = await createCanvas(dancer)
  325.                 danceCvsList.push({
  326.                     dancer,
  327.                     cvs: danceCvs
  328.                 })
  329.             }
  332.             let i = 0
  333.             async function animationFrame() {
  334.                 if (i % DROP_FRAME == 0) {
  335.                     for (let j = 0; j < danceCvsList.length; j++) {
  336.                         const { cvs, dancer } = danceCvsList[j];
  337.                         await drawFrame(cvs, dance.frames[(i / DROP_FRAME) % dance.frames.length], dancer.avatar_url)
  338.                     }
  339.                 }
  340.                 requestAnimationFrame(animationFrame)
  341.                 i++;
  342.             }
  343.             await animationFrame()
  345.             document.body.querySelector('.bgm').play()
  346.             document.body.querySelector('.bgm').loop = true;
  347.             /**
  348.              * 创建一个用户
  349.              * @author          linyisonger
  350.              * @date          2025-02-23
  351.              */
  352.             function createCanvas(dancer) {
  353.                 let avatarUrl = dancer.avatar_url
  354.                 let cvs = document.createElement("canvas")
  355.                 cvs.setAttribute('width', dance.width)
  356.                 cvs.setAttribute('height', dance.height)
  357.                 cvs.width = dance.width * ZOOM_OUT;
  358.                 cvs.height = dance.height * ZOOM_OUT;
  359.                 document.body.querySelector("#container").appendChild(cvs)
  360.                 return cvs
  361.             }
  362.             /**
  363.              * 渲染一帧
  364.              * @author          linyisonger
  365.              * @date          2025-02-23
  366.              */
  367.             async function drawFrame(cvs, frame, avatar) {
  368.                 /** @type {CanvasRenderingContext2D } */
  369.                 let ctx = cvs.getContext('2d')
  370.                 let roleImg = await loadImage(frame.url)
  371.                 let avatarImg = await loadImage(avatar)
  372.                 ctx.clearRect(0, 0, cvs.width, cvs.height)
  373.                 ctx.drawImage(roleImg, 0, 0, cvs.width, cvs.height)
  374.                 let avatarWidth = 40 * ZOOM_OUT
  375.                 ctx.drawImage(avatarImg, (frame.avatar.x * ZOOM_OUT - avatarWidth / 2), (frame.avatar.y * ZOOM_OUT - avatarWidth / 2), avatarWidth, avatarWidth)
  376.             }
  377.         }
  379.         initGame()
  386.     </script>
  388. </body>
  390. </html>
复制代码
源码仓库

更新的话文章大概不肯定会更新，仓库会大概更新，有问题可以提issue~
   https://github.com/linyisonger/H5.Examples

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

吴旭华

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表