svg rect 加js事件_用Js实现人脸识别功能

最新推荐文章于 2021-01-23 14:07:38 发布
最新推荐文章于 2021-01-23 14:07:38 发布
阅读量163 收藏
点赞数
文章标签： svg rect 加js事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42347629/article/details/113321655
版权

what？你没有看错，强大的JavaScript也可以实现人脸识别功能。小编精心整理了一个人脸识别的JavaScript库(tracking.js)，通过这篇文章，你可以了解到如何在网页中实现一个人脸识别功能。

tracking.js

Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件(足够使用了)。

还有一个我觉得不错的功能就是，截取摄像头的图像，对于一些网站用这个功能来设置用户头像也是个很炫的功能。

简单实例

引入核心类:


引入颜色模型类:

本命咸鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
人脸画框问题——face box问题
NLP与推荐算法
11-23 759
接上次博文，所有的细节问题不去解决它就会阻碍你前进的脚步。面对细节问题，丝毫不会吝啬时间，当做正事解决。 我是百变大魔王小明哥，如今我又多了一个角色，导演，哈哈哈，我是十八线见习导演。 言归正传：上次一个图画多个脸时出现问题，坐标可能没有对应上，所以出现可笑的问题。 以styleGAN中的图为例说明， 上图所示，有6个没有框，而且框起来的位置也不一定正确 因为实际检测的其中一个如下：...
人脸识别几个解决方案分析与测评
热门推荐
孔祥月的博客
07-17 1万+
在人脸识别属性返回功能以范围方面，较突出的是百度人脸识别与Face++,其次是云飞科技、科大讯飞、FaceCore。 Face++人脸识别技术研究文档一、服务内容：1.人脸检测与跟踪技术提供快速、高准确率的人像检测功能。普遍适用于图片与实时视频流，能够应对复杂的光照并支持多种人脸姿态。可检出不小于16*16像素的人脸，并可在移动设备上实时跟踪人脸（20帧/秒）。2.人脸关键点检测可以精确定位面部的关
SVG_1_人脸
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
04-27 324
第一篇SVG效果文章 上面的“人脸”，是使用EditPlus敲出来的，刚开始玩SVG，只弄了几个静态图形混搭，见笑。 PS： 使用135编辑器，感觉很蹩脚，转换后再发送到微信公众号，出来显示样式尺寸会有影响，甚至还会丢失控件，我真了个去，期间过程真的蹩脚，希望公众号本身能支持。 ...
SVG的内部事件添加
weixin_34088598的博客
01-06 1024
SVG的内部事件添加： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme...
svg rect 加js事件_svg演示kafka的broker和zookeeper动态交互
weixin_29260291的博客
01-23 314
根据《开发动画演示系统-计划和架构》中我第一步需要实现一个web前端来动态演示分布式系统。今天已经可以展示简单的动画了。哈哈该动画还很初级，只是演示了kafka的broker在启动的时候，先要想zookeeper注册一个id。kafka用zookeeper来管理kafka集群的所有broker。后面我将继续完善和丰富这个动画。还要加上交互效果。本文分享一下这个动画的制作过程。准备环境需要启动一个h...
人脸识别HTML实现
02-27
调用百度人脸识别接口， 实现了人脸识别+人脸对比，导入eclipse即可运行
svg.js.zip_8svg.con_flex_javascript SVG_svg_svg.js
09-14
这个名为"svg.js.zip_8svg.con_flex_javascript SVG_svg_svg.js"的压缩包，结合描述中的"Trabajar con svg en Flex"，似乎关注的是在Adobe Flex环境中使用SVG.js来处理SVG图形。 Flex是一款强大的基于ActionScript...
svg-edit.rar_javascript SVG_js绘图_svg editor js_svg 组态 html_svg-
09-19
通过学习和使用SVG-Edit，开发者不仅可以掌握SVG的基本用法，还能深入理解JavaScript如何与SVG图形交互，这对于前端开发、数据可视化、UI设计等领域都是非常有价值的技能。同时，对于想要开发类似在线编辑器的开发者...
SVG.rar_c#svg_svg_svg contextMenu_svg csharp_svgpan.js
09-24
5. **svgpan.js**：这是一个JavaScript库，通常用于实现SVG图像的平移和缩放功能。通过JavaScript，可以轻松实现用户在浏览器中对SVG图形的自由移动和缩放，增强用户体验。 6. **200711220294247498**：这个文件名...
Svg.rar_javascript_svg_svg 动画
09-22
采用SVG实现两个动画，一个使用JavaScript，另一个没有使用JavaScript
用于 svg.js 添加 svg过滤器的插件_JavaScript_代码_相关文件_下载
07-12
用于svg.js添加过滤器功能的插件。 svg.filter.js 根据 MIT 许可条款获得许可。 例子 此外 不过滤 引用过滤器节点 动画过滤器值 连锁效应 效果类 更多详情、使用方法，请下载后阅读README.md文件
html5 svg 中元素点击事件添加方法
09-28
最近在用svg的点击事件做东西，之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件，接下来详细介绍添加方法，感兴趣的朋友可以了解下
JS事件的详情介绍
超cccccccc的博客
08-15 679
事件 事件概念 事件是通知和侦听完成的，先侦听后通知，执行对应的函数。 完成事件侦听需要以下几个因素：事件的类型必须相同，事件侦听的对象和抛发的对象必须相同，将事件抛向侦听对象就可以，先侦听后抛发。部分事件是系统默认事件，这些事件会由系统自动抛发。 document.addEventListener('aa',eventHandler); function eventHandler(e){console.log(e)} //侦听事件 var evt = new Event('aa')//创建一个相同类型事件
SVG鼠标事件响应的四种写法
动弈的专栏
08-10 2779
SVG有四种常用的鼠标响应的脚本写法(SMIL方式、Attributes方式、JavaScript+SMIL方式、EventListener方式)，根据不同的需要让大家有更多的选择。本文介绍了四种实现SVG鼠标事件的例子。 SVG鼠标事件实现方式的例子效果是：单击一个红色的矩形
svg动态添加事件
zhaozhenzhen817的博客
10-13 5517
html> html lang="en"> head> meta charset="utf-8"> title>流程图 BZ08_Mtitle> head> style> input{ margin: 10px; } style> body> div> input value="A1" type="checkbox"> input v
svg.draggable.js 实现动态向svg中添加图形和图片并可以拖拽
water_Popcorn的博客
10-09 2620
源码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>动态添加图形和图片并可以拖拽</title> <meta content="width=device-width;initial-scale=1"> &...
svg鼠标响应事件的四种方法(其中两种可支持火狐)
weixin_34130269的博客
10-10 215
 svg鼠标响应事件的四种方法 鼠标响应事件的四种方法，以click事件为例。 Mouse Events - SMIL &lt;?xml version="1.0" encoding="ISO-8859-1" standalone="no"?&gt; &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 200109...
如何用js实现SVG图形的端点捕捉功能
最新发布
07-11
要实现SVG图形的端点捕捉功能，可以使用JavaScript结合SVG的事件监听和计算逻辑来实现。以下是一个简单的实现示例： 1. 首先，创建一个SVG元素，并在其中绘制你所需的图形，例如一个矩形： ```html <svg id="my-svg" width="400" height="400"> <rect id="my-rect" x="100" y="100" width="200" height="200" fill="blue"/> </svg> ``` 2. 在JavaScript中，获取SVG元素和矩形元素的引用： ```javascript const svg = document.getElementById('my-svg'); const rect = document.getElementById('my-rect'); ``` 3. 添加鼠标移动事件监听器到SVG元素上，以便实时捕捉鼠标位置： ```javascript svg.addEventListener('mousemove', (event) => { const mouseX = event.clientX; const mouseY = event.clientY; // 在这里编写端点捕捉的逻辑 }); ``` 4. 在鼠标移动事件处理程序中，编写端点捕捉的逻辑。可以通过计算鼠标位置与图形的端点位置之间的距离，找到最近的端点： ```javascript const rectPoints = [ { x: rect.x.baseVal.value, y: rect.y.baseVal.value }, // 左上角 { x: rect.x.baseVal.value + rect.width.baseVal.value, y: rect.y.baseVal.value }, // 右上角 { x: rect.x.baseVal.value, y: rect.y.baseVal.value + rect.height.baseVal.value }, // 左下角 { x: rect.x.baseVal.value + rect.width.baseVal.value, y: rect.y.baseVal.value + rect.height.baseVal.value } // 右下角 ]; let closestPoint = null; let minDistance = Infinity; rectPoints.forEach((point) => { const distance = Math.sqrt(Math.pow(mouseX - point.x, 2) + Math.pow(mouseY - point.y, 2)); if (distance < minDistance) { minDistance = distance; closestPoint = point; } }); console.log('最近的端点：', closestPoint); ``` 在上述代码中，我们首先定义了矩形的四个端点坐标，并使用欧氏距离公式计算鼠标位置与每个端点的距离。然后，通过比较距离找到最近的端点，并将其输出到控制台。 你可以根据实际需求对上述代码进行扩展和优化，例如添加拖拽功能、增加其他图形的捕捉等。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值