js 計算圖片內(nèi)點個數(shù)的示例代碼
前言
圖片是由連續(xù)的點信息組成，每個點信息包含四個長度即rgba信息，通過遍歷配合處理函數(shù)實現(xiàn)對點個數(shù)的判斷。
實現(xiàn)思路
本例子采用png格式圖片，只需要判該點透明度（opacity）是否為0即可確定是否為小球上一點，如果不為0，判斷上下左右方向的點是否透明度為0，不為0遞歸該結(jié)果，并且將該點的rgba信息置為0；結(jié)束后開始下一個主循環(huán)并計數(shù)，直至循環(huán)結(jié)束。
具體步驟
創(chuàng)建canvas對象，加載目標圖片，使用canvas的drawImage方法將該圖片對象寫入canvas中；參數(shù)為圖片對象,貼圖起點橫坐標,貼圖起點縱坐標，貼圖寬度，貼圖高度。
var canvas = document.createElement('canvas'),
var ctx = canvas.getContext('2d');
ctx.drawImage(imgObj, 0, 0,imgWidth,imgHeight);
獲取圖片的相關(guān)信息canvas的getImageData方法，需要使用圖片上各點的rgba信息；參數(shù)為采點起始橫坐標,采點起始縱坐標，采點寬度，采點高度。
var imageData = ctx.getImageData(0,0,width,height); //改寫imageData.data信息實現(xiàn)點的計數(shù)
遍歷圖片的點信息imageData.data，四個點為一組增長條件為i+4，當透明度不為0時調(diào)用處理函數(shù)，并且終止循環(huán)（終止循環(huán)，防止短時間內(nèi)循環(huán)次數(shù)過多造成內(nèi)存溢出），循環(huán)條件為numberStart<imageData.data.length-1 結(jié)束，number為最終的點數(shù)量;numberStart為上次循環(huán)結(jié)束時點的索引值，number為點的數(shù)量，judgeZero為處理函數(shù)。
function repeateData(){
for(var i=numberStart;i<imageData.data.length;i+=4){
numberStart+=4;
var a = imageData.data[i+3];
if(a != 0) {
judgeZero(i,number);
break;
}
}
if(numberStart<imageData.data.length-1){
repeateData()
}else{
console.log(number);
}
}
點的處理函數(shù)，根據(jù)圖片的寬和高計算出點的坐標(x,y)，并且計算出該點上下左右四個點的透明度信息。
function judgeZero(index){
number++;
clearPoints(index);
}
function clearPoints(index){
var x = (index/4)%width,
y = Math.floor(index/4/width);
var up = (x+(y-1)*width)*4,
down = (x+(y+1)*width)*4,
right = (x+1+y*width)*4,
left = (x-1+y*width)*4;
var uA = imageData.data[up+3],
bA = imageData.data[down+3],
rA = imageData.data[right+3],
lA = imageData.data[left+3];
}
function clearRgb(index){
imageData.data[index] = 0;
imageData.data[index+1] = 0;
imageData.data[index+2] = 0;
imageData.data[index+3] = 0;
}
判斷四個方向的透明度是否為0，如果為0繼續(xù)調(diào)用，并且擦出該點信息。
if(uA != 0){
clearRgb(up);
clearPoints(up);
}
if(bA != 0){
clearRgb(down);
clearPoints(down);
}
if(rA != 0){
clearRgb(right);
clearPoints(right);
}
if(lA != 0){
clearRgb(left);
clearPoints(left);
}
將透明度不為0的所有點信息置為0，之后該點不會對主循環(huán)的判斷有影響。
function clearRgb(index){
imageData.data[index] = 0;
imageData.data[index+1] = 0;
imageData.data[index+2] = 0;
imageData.data[index+3] = 0;
}
執(zhí)行4，5，6步驟直至所有點rgba信息都被置為0，主循環(huán)繼續(xù)，最后可得到數(shù)量。
總結(jié)
主要的原理為獲取球上的一點，通過上下左右遞歸來判斷連續(xù)點并消除點信息，至該點的信息已在imageData.data中全部抹去，此過程記為1個點，主循環(huán)繼續(xù)；圖片為png格式，點的類型不限于圓形；該方法僅供參考。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇改變layer confirm彈窗按鈕的顏色方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
淘寶幻燈片效果：能自動播放，鼠標指向或者點擊數(shù)字按鈕就能切換圖片。2013-03-03
跨瀏覽器開發(fā)經(jīng)驗總結(jié)（四） 怎么寫入剪貼板
讓你的操作剪切板的操作支持多瀏覽器，一般IE,Firefox2010-05-05
JavaScript中防抖和節(jié)流的原理和區(qū)別詳解
JavaScript 中,防抖和節(jié)流是一種用于優(yōu)化事件處理函數(shù)調(diào)用頻率的技術(shù),防抖和節(jié)流的目的都是為了避免頻繁地觸發(fā)事件處理函數(shù),從而減少瀏覽器和服務器的負擔,本文將給大家介紹一下JavaScript中防抖和節(jié)流的原理和區(qū)別,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了JavaScript如何實現(xiàn)滑塊補圖驗證碼效果，文章通過代碼示例介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴可以參考閱讀下2023-07-07
在本文為大家介紹兩種思路實現(xiàn)點擊頁面其它地方隱藏該div，第一種是對document的click事件綁定事件處理程序..詳情請參考本文2013-11-11
javascript removeChild 導致的內(nèi)存泄漏
最近看到司徒正美的一篇文章《移除DOM節(jié)點》，文中說到在IE中移除容器類節(jié)點，會引起內(nèi)存泄露。2010-08-08
Slider 焦點圖會在很多的網(wǎng)站上見到，在本文為大家詳細介紹下具體的實現(xiàn)過程，下面的源碼大家可以運行下2013-10-10
設(shè)置iframe的document.designMode后僅Firefox中其body.innerHTML為br