路
查找字符串”abcoefoxyozzopp”中所有o出現(xiàn)的位置以及次數(shù)
1.核心算法:先查找第一個(gè)o出現(xiàn)的位置
2.然后只要indexOf返回的結(jié)果不是-1就繼續(xù)往后查找
3.因?yàn)閕ndexOf只能查找第一個(gè),所以后面的查找,利用第二個(gè)參數(shù),當(dāng)前索引加1,從而繼續(xù)查找。
判斷一個(gè)字符串'abcoefoxyozzopp'中出現(xiàn)次數(shù)最多的字符,并統(tǒng)計(jì)其次數(shù)。
判斷一個(gè)字符串'abcoefoxyozzoppK'中出現(xiàn)次數(shù)最多的字符,并統(tǒng)計(jì)其次數(shù)。
1.核心算法:利用charAt(),遍歷這個(gè)字符串
把每個(gè)字符都存儲(chǔ)給對(duì)象,如果對(duì)象沒(méi)有該屬性,就為1,如果存在了就 +1
遍歷對(duì)象,得到最大值和該字符
喜歡的可以關(guān)注劉學(xué)長(zhǎng)自學(xué)前端,下期帶你做更多的前端開發(fā)案例。
#前端開發(fā) #CSS3 #JavaScript
racking.js將不同的計(jì)算機(jī)視覺(jué)算法和技術(shù)引入到瀏覽器環(huán)境中。通過(guò)使用現(xiàn)代的HTML5規(guī)范,我們使你能夠做實(shí)時(shí)的顏色跟蹤,人臉檢測(cè)等。
github上該項(xiàng)目目前已經(jīng)有8.6K個(gè)Star、1.4K個(gè)Fork、192個(gè)Issues,還是比較成熟的。
下面介紹下tracking.js的使用步驟。
一、下載js文件
tracking.js官方網(wǎng)站和github上都提供了下載入口,下載的壓縮包文件包含了所有需要的js和示例代碼。
github入口eduardolundgren/tracking.js
tracking.js官網(wǎng)
最終下載是一個(gè)zip的壓縮包,解壓后目錄結(jié)構(gòu)是這樣的:
示例項(xiàng)目目錄結(jié)構(gòu)
本文示例所需js都在build目錄下。
二、跟蹤器 Trackers
跟蹤器包含了顏色跟蹤器、對(duì)象跟蹤器(人臉、眼睛、嘴巴檢測(cè))、自定義跟蹤器。
1.引入公共js
<script src="../build/tracking-min.js"></script>
2.定義個(gè)跟蹤器類型并傳入檢測(cè)內(nèi)容參數(shù)
var myTracker=new tracking.Tracker(options);
例如定義一個(gè)顏色跟蹤器
var colorsTracker=new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
3.定義檢測(cè)事件監(jiān)聽(tīng)方法(業(yè)務(wù)處理)
myTracker.on('track', function(event) {
if (event.data.length===0) {
//未檢測(cè)到目標(biāo)
} else {
event.data.forEach(function(data) {
//描繪出檢測(cè)到的對(duì)象,比如檢測(cè)到人臉在人臉?biāo)闹墚媯€(gè)框
});
}
});
4.開始檢測(cè)
可以檢測(cè)<canvas>, <img>、<video> 三個(gè)html標(biāo)簽
var trackerTask=tracking.track('#myVideo', myTracker);
第一個(gè)參數(shù)是你的圖像或視頻標(biāo)簽選擇器,對(duì)應(yīng)html文檔類似:
<video id="myVideo" width="400" height="300" preload autoplay loop muted></video>
第二個(gè)參數(shù)是第二步定義的跟蹤器變量
5.檢測(cè)過(guò)程中暫停和繼續(xù)檢測(cè)
如果業(yè)務(wù)需要你中途暫停檢測(cè)或者再次開啟檢測(cè):
trackerTask.stop(); // 停止檢測(cè)
trackerTask.run(); // 再次開始檢測(cè)
基本都是跟結(jié)構(gòu)代碼一樣的,假設(shè)我們已經(jīng)都引入了公共的js和video標(biāo)簽
<script src="../build/tracking-min.js"></script>
<video id="myVideo" width="400" height="300" preload autoplay loop muted></video>
1.定義個(gè)顏色跟蹤器
var colors=new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
官方默認(rèn)提供了三個(gè)顏色'magenta'、'cyan'、 'yellow',也可以進(jìn)行自定義顏色,主要限制rgb三個(gè)色值,比如以下定義一個(gè)綠色的顏色:
tracking.ColorTracker.registerColor('green', function(r, g, b) {
if (r < 50 && g > 200 && b < 50) {
return true;
}
return false;
});
2.定義檢測(cè)事件監(jiān)聽(tīng)方法
colors.on('track', function(event) {
if (event.data.length===0) {
// No colors were detected in this frame.
} else {
event.data.forEach(function(rect) {
// rect.x, rect.y, rect.height, rect.width, rect.color
});
}
});
當(dāng)檢測(cè)到顏色區(qū)域時(shí)會(huì)觸發(fā)該事件,事件會(huì)返回坐標(biāo)點(diǎn)、高度、寬度和顏色值。可以通過(guò)這幾個(gè)值使用css將該區(qū)域用框框畫出來(lái)。類似:
function(x, y, w, h, color) {
var rect=document.createElement('div');
document.querySelector('.demo-container').appendChild(rect);
rect.classList.add('rect');
rect.style.border='2px solid ' + color;
rect.style.width=w + 'px';
rect.style.height=h + 'px';
rect.style.left=(img.offsetLeft + x) + 'px';
rect.style.top=(img.offsetTop + y) + 'px';
};
顏色跟蹤器
3.開始檢測(cè)
tracking.track('#myVideo', colors);
1.引入對(duì)象js
官方提供了人臉、眼睛、嘴巴三種對(duì)象的js,檢測(cè)相應(yīng)對(duì)象時(shí)需要引入對(duì)應(yīng)的js。
<script src="../build/data/face.js"></script>
<script src="../build/data/eye.js"></script>
<script src="../build/data/mouth.js"></script>
2.定義個(gè)對(duì)象跟蹤器
var objects=new tracking.ObjectTracker(['face', 'eye', 'mouth']);
3.定義檢測(cè)事件監(jiān)聽(tīng)方法
objects.on('track', function(event) {
if (event.data.length===0) {
// No objects were detected in this frame.
} else {
event.data.forEach(function(rect) {
// rect.x, rect.y, rect.height, rect.width
});
}
});
跟顏色跟蹤器類似,當(dāng)識(shí)別到人臉、眼睛、嘴巴時(shí)會(huì)觸發(fā)事件,事件會(huì)返回坐標(biāo)點(diǎn)、高度、寬度。可以通過(guò)這幾個(gè)值使用css將該區(qū)域用框框畫出來(lái)。類似:
人臉、眼睛、嘴巴檢測(cè)效果
4.開始檢測(cè)
tracking.track('#myVideo', objects);
你也可以使用相機(jī)
tracking.track('#myVideo',objects, { camera: true });
基于tracking.js的能力構(gòu)件自定義跟蹤器、 比如tracking.js提供訪問(wèn)相機(jī)、通過(guò)畫布獲取每一幀的像素矩陣的能力,你只需要繼承Tracker抽象即可。
1.定義跟蹤器,創(chuàng)建構(gòu)造函數(shù)并繼承tracking.Tracker
var MyTracker=function() {
MyTracker(this, 'constructor');
}
tracking.inherits(MyTracker, tracking.Tracker);
2. 實(shí)現(xiàn)檢測(cè)方法
您需要為您的跟蹤器實(shí)現(xiàn)track方法。它將接收當(dāng)前圖像(或視頻幀)的像素矩陣。當(dāng)跟蹤完成時(shí),代碼應(yīng)該調(diào)用emit方法來(lái)通過(guò)track事件發(fā)送結(jié)果
var MyTracker=function() {
MyTracker.prototype.track=function(pixels, width, height) {
// 檢測(cè)代碼寫在這
this.emit('track', {
//結(jié)果數(shù)據(jù)
});
}
}
3.使用自定義跟蹤器
var myTracker=new tracking.MyTracker();
myTracker.on('track', function(event) {
// Results are inside the event
});
tracking.track('#myVideo', myTracker);
以上就是tracking.js的全部?jī)?nèi)容了,有興趣的可以到tracking.js的官網(wǎng)了解更多。
希望本文能給你提供幫助,關(guān)注我,不定期發(fā)布IT技術(shù)內(nèi)容。
前端開發(fā)中,有時(shí)我們需要模擬點(diǎn)擊頁(yè)面上的某個(gè)位置,比如自動(dòng)化測(cè)試或者模擬用戶操作。今天,我將一步步帶大家實(shí)現(xiàn)這個(gè)功能,讓大家能夠輕松理解并應(yīng)用。
簡(jiǎn)單來(lái)說(shuō),x 和 y 坐標(biāo)就是頁(yè)面上的一個(gè)點(diǎn)的位置。x 代表水平方向,y 代表垂直方向。我們通過(guò)這兩個(gè)數(shù)值可以準(zhǔn)確地定位到頁(yè)面上的某個(gè)點(diǎn),然后在這個(gè)點(diǎn)上模擬一次點(diǎn)擊,就像用戶用鼠標(biāo)點(diǎn)擊一樣。
我們可以通過(guò) document.elementFromPoint 方法來(lái)實(shí)現(xiàn)。這個(gè)方法會(huì)返回指定坐標(biāo)上的元素,然后我們對(duì)這個(gè)元素調(diào)用 click 方法,就能模擬一次點(diǎn)擊。
基本實(shí)現(xiàn)步驟
假設(shè)我們有以下 HTML 結(jié)構(gòu):
<div>
hello world
</div>
我們希望點(diǎn)擊這個(gè) div 元素,首先可以寫以下代碼:
// 監(jiān)聽(tīng)所有點(diǎn)擊事件,并在控制臺(tái)打印被點(diǎn)擊的元素
document.addEventListener('click', (e)=> {
console.log(e.target);
});
// 定義我們要點(diǎn)擊的坐標(biāo)
const x=10;
const y=10;
// 獲取指定坐標(biāo)上的元素,并觸發(fā)點(diǎn)擊事件
document.elementFromPoint(x, y).click();
詳細(xì)解釋:
除了直接調(diào)用 click 方法,我們還可以使用 MouseEvent 構(gòu)造函數(shù)來(lái)模擬更復(fù)雜的點(diǎn)擊事件,比如包括點(diǎn)擊的位置、是否可以取消等屬性。
// 監(jiān)聽(tīng)所有點(diǎn)擊事件,并在控制臺(tái)打印被點(diǎn)擊的元素
document.addEventListener('click', (e)=> {
console.log(e.target);
});
// 定義坐標(biāo)
const x=10;
const y=10;
// 創(chuàng)建一個(gè)點(diǎn)擊事件
const click=(x, y)=> {
const ev=new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true,
'screenX': x,
'screenY': y
});
// 獲取指定坐標(biāo)上的元素
const el=document.elementFromPoint(x, y);
// 分發(fā)點(diǎn)擊事件
el.dispatchEvent(ev);
};
// 調(diào)用點(diǎn)擊函數(shù)
click(x, y);
詳細(xì)解釋:
通過(guò)本文的講解,我們了解了如何在 JavaScript 中通過(guò) x, y 坐標(biāo)來(lái)模擬點(diǎn)擊事件。無(wú)論是直接調(diào)用 click 方法,還是使用 MouseEvent 構(gòu)造函數(shù),都能實(shí)現(xiàn)這一功能。希望大家在日常開發(fā)中能用到這個(gè)技巧,提升工作效率。
如果你覺(jué)得本文有幫助,不妨點(diǎn)贊收藏,也可以分享給更多需要的小伙伴。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。