搜索到
87
篇与
的结果
-
-
原生Js Canvas去除视频绿幕背景 Js去除视频背景注： 这里的去除视频背景并不是对视频文件进行操作去除背景如果需要对视频扣除背景并导出可以使用ffmpeg等库，这里仅作播放用所以采用这种方法由于uniapp中的canvas经过封装，且 uniapp 的 drawImage 无法绘制视频帧画面，因此uniapp中不适用实现过程是将视频使用canvas逐帧截下来对截取的图片进行处理，然后在canvas中显示处理好的图片最后通过定时器高速处理替换，形成视频播放的效果，效果如下图⬇原文链接：https://blog.csdn.net/Raccon_/article/details/132732976<template> <div class="videoBgRemove"> <video id="video" src="/images/example.mp4" loop autoplay muted ref="video" style="width: 240px;height: 135px;"></video> <canvas id="output-canvas" width="240" height="135" willReadFrequently="true" ref="canvas"></canvas> </div> </template> <script setup> import {ref, onMounted} from 'vue'; const video = ref(null); const canvas = ref(null); const ctx = ref(null); const canvas_tmp = ref(null); const ctx_tmp = ref(null); const init = () => { ctx.value = canvas.value.getContext('2d'); // 创建的canvas宽高最好与显示图片的canvas、video宽高一致 canvas_tmp.value = document.createElement('canvas'); canvas_tmp.value.setAttribute('width', 240); canvas_tmp.value.setAttribute('height', 135); ctx_tmp.value = canvas_tmp.value.getContext('2d'); video.value.addEventListener('play', computeFrame); } const numToPoint = (num, width) => { let col = num % width; let row = Math.floor(num / width); row = col === 0 ? row : row + 1; col = col === 0 ? width : col; return [row, col]; } const pointToNum = (point, width) => { let [row, col] = point; return (row - 1) * width + col } const getAroundPoint = (point, width, height, area) => { let [row, col] = point; let allAround = []; if (row > height || col > width || row < 0 || col < 0) return allAround; for (let i = 0; i < area; i++) { let pRow = row - 1 + i; for (let j = 0; j < area; j++) { let pCol = col - 1 + j; if (i === area % 2 && j === area % 2) continue; allAround.push([pRow, pCol]); } } return allAround.filter(([iRow, iCol]) => { return (iRow > 0 && iCol > 0) && (iRow <= height && iCol <= width); }) } const computeFrame = () => { if (video.value) { if (video.value.paused || video.value.ended) return; } // 如果视频比例和canvas比例不正确可能会出现显示形变， 调整除的值进行比例调整 ctx_tmp.value.drawImage(video.value, 0, 0, video.value.clientWidth / 1, video.value.clientHeight / 1); // 获取到绘制的canvas的所有像素rgba值组成的数组 let frame = ctx_tmp.value.getImageData(0, 0, video.value.clientWidth, video.value.clientHeight); //----- emergence ---------- const height = frame.height; const width = frame.width; const pointLens = frame.data.length / 4; for (let i = 0; i < pointLens; i++) { let r = frame.data[i * 4]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (r < 100 && g > 120 && b < 200) { frame.data[i * 4 + 3] = 0; } } const tempData = [...frame.data] for (let i = 0; i < pointLens; i++) { if (frame.data[i * 4 + 3] === 0) continue const currentPoint = numToPoint(i + 1, width); const arroundPoint = getAroundPoint(currentPoint, width, height, 3); let opNum = 0; let rSum = 0; let gSum = 0; let bSum = 0; arroundPoint.forEach((position) => { const index = pointToNum(position, width); rSum = rSum + tempData[(index - 1) * 4]; gSum = gSum + tempData[(index - 1) * 4 + 1]; bSum = bSum + tempData[(index - 1) * 4 + 2]; if (tempData[(index - 1) * 4 + 3] !== 255) opNum++; }) let alpha = (255 / arroundPoint.length) * (arroundPoint.length - opNum); if (alpha !== 255) { // debugger frame.data[i * 4] = parseInt(rSum / arroundPoint.length); frame.data[i * 4 + 1] = parseInt(gSum / arroundPoint.length); frame.data[i * 4 + 2] = parseInt(bSum / arroundPoint.length); frame.data[i * 4 + 3] = parseInt(alpha); } } //------------------------ ctx.value.putImageData(frame, 0, 0); setTimeout(computeFrame, 0); } onMounted(() => { init(); }) </script>
-
推荐一个随机头像组件 DiceBear 骰子熊The avatar library you've always been looking for.您一直在寻找的头像库。Create avatars for your profiles, designs, websites or apps. Piece by piece or based on a seed.为您的个人资料、设计、网站或应用程序创建头像。一点一点或基于种子。More than 25 avatar styles!超过25种头像风格！Among our avatar styles you're sure to find one that perfectly fits to you and your project.在我们的头像样式中，您一定会找到一种最适合您和您的项目的样式。Fully customizable! 完全可定制！Each avatar style comes with several options that allow you to create individual avatars.每个头像样式都带有多个选项，可让您创建单独的头像。Free and fast HTTP API!免费且快速的 HTTP API！Start directly with our free HTTP API - no registration required.直接使用我们的免费 HTTP API 开始 - 无需注册。链接：https://www.dicebear.com/
-
推荐一个白板开源程序：Excalidraw Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.Excalidraw是一个白板工具，可以让你轻松地绘制出手绘的图表。An open source virtual hand-drawn style whiteboard.Collaborative and end-to-end encrypted.一个开源的虚拟手绘风格白板.协作和端到端加密。FeaturesThe Excalidraw editor (npm package) supports:Free & open-source.Infinite, canvas-based whiteboard.Hand-drawn like style.Dark mode.Customizable.Image support.Shape libraries support.Localization (i18n) support.Export to PNG, SVG & clipboard.Open format - export drawings as an .excalidraw json file.Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...Arrow-binding & labeled arrows.Undo / Redo.Zoom and panning support.Github地址：https://github.com/excalidraw/excalidraw搭建一个：https://draw.lanol.cn
-
-
-
推荐一个开源的监控程序-Uptime 多个监控页面 多种监控方式 现场演示尝试一下！东京演示服务器：https://demo.uptime.kuma.pet（由 Uptime Kuma 赞助商 赞助）这是一个临时的现场演示，所有数据将在10分钟后删除。使用距离您较近的一个，但我建议您应该安装并尝试以获得最佳的演示体验。特点监控 HTTP(s) / TCP / HTTP(s) 关键字 / HTTP(s) Json 查询 / Ping / DNS 记录 / 推送 / Steam 游戏服务器 / Docker 容器的正常运行时间精美、反应式、快速的 UI/UX通过 Telegram、Discord、Gotify、Slack、Pushover、电子邮件 (SMTP) 和 [90 多个通知服务，单击此处查看完整列表](https://github.com/louislam/uptime-kuma/tree/master /src/组件/通知）20 秒间隔多语言多个状态页面将状态页面映射到特定域Ping图表证书信息代理支持2FA 支持录或卷。如何安装Dockerdocker run -d --restart=always -p 3001:3001 -v uptime-kuma:/app/data --name uptime-kuma louislam/uptime-kuma:1Uptime Kuma 现已在 http://localhost:3001 上运行[!警告]不支持NFS（网络文件系统）等文件系统。请映射到本地目录或卷。开源地址：https://github.com/louislam/uptime-kuma
