要實(shí)現(xiàn)什么##
同事想做一張世界地圖的背景圖张抄，但是網(wǎng)上找的圖片都太low了孤页。他想用那種密集的點(diǎn)陣組成的世界地圖。作為程序員奕纫，想法當(dāng)然是通過圖片處理提陶，識別像素點(diǎn)，然后生成新的圖片匹层。
image
目標(biāo)是這樣的：
image
實(shí)現(xiàn)思路##
其實(shí)稍微想一下就很容易想明白：
1. 獲取圖片數(shù)據(jù)
2. 分析像素點(diǎn)隙笆，判斷是不是空白 （每個(gè)像素點(diǎn)的rgb色值不是255或某個(gè)閾值： r<255 || g<255 || b<255），就替換成指定顏色像素點(diǎn)
3. 把圖片劃分成像素塊升筏， 某一個(gè)像素塊里空白面積小于 50%（看需求設(shè)定閾值）撑柔，判斷為填充點(diǎn)，否則變?yōu)橥该鳌?br>
4. 重新繪制圖片您访。
不拘泥于語言铅忿，基本思路都是這樣。下面是一個(gè)Canvas版本：
<!DOCTYPE html>
<html lang="zh-CN" class=" no-touch"><head>
<head><title>Canvas 轉(zhuǎn)點(diǎn)陣</title></head>
<body>
<img src="./timg.jpg" id='img' style="display:none;" />
<div id="container" style="width:1200px;height:1038px">
<canvas id="cvs" width="1200" height="1038"></canvas>
</div>
<script type="text/javascript">
// 判斷像素塊是否空白o(hù)r像素覆蓋
function isCover(imgdata, width, x, y) {
var covered = 0;
// 像素快為 8*8
for (var i=x; i<x+8; i++) {
for (var j=y; j<y+8; j++) {
var idx = i*4*width + 4*j;
// 閾值設(shè)為192
if (imgdata[idx]<192 || imgdata[idx+1]<192 || imgdata[idx+2]<192 ) {
covered++;
}
// 覆蓋面積超過 45/64
if (covered > 45) {
return true;
}
}
}
return false;
}
// 填充像素塊
function drawPoints(imgdata, width, x, y, clear=false) {
for (var i=x; i<x+8; i++) {
for (var j=y; j<y+8; j++) {
var idx = i*4*width + 4*j;
if (i >=x+2 && i<x+6 && j>=y+2 && j<y+6 && !clear) {
// 畫小方塊
imgdata[idx] = 168;
imgdata[idx+1] = 168;
imgdata[idx+2] = 168;
imgdata[idx+3] = 192;
} else {
// 置為空白
imgdata[idx] = 255;
imgdata[idx+1] = 255;
imgdata[idx+2] = 255;
imgdata[idx+3] = 0;
}
}
}
return imgdata;
}
// 點(diǎn)陣轉(zhuǎn)換
function convertPointArray(img) {
for (var i=0; i<img.height; i=i+8) {
for (var j=0; j<img.width; j=j+8) {
var isCovered = isCover(img.data, img.width, i, j);
if (isCovered) {
img.data = drawPoints(img.data, img.width, i, j);
} else {
// 其他區(qū)域直接清空
img.data = drawPoints(img.data, img.width, i, j, true);
}
}
}
return img;
}
function _init() {
var cvs = document.getElementById('cvs'),
ctx = cvs.getContext('2d'),
img = new Image();
img = document.getElementById('img');
img.crossOrigin = "*";
img.onload = function() {
// 把圖片放到canvas 畫布上
ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
// 獲取像素?cái)?shù)據(jù)
var imageData = ctx.getImageData(0, 0, cvs.width, cvs.height);
// 轉(zhuǎn)換
imageData = convertPointArray(imageData);
// 擦除原來的圖片
ctx.clearRect(0, 0, cvs.width, cvs.height);
// 重新繪圖
ctx.putImageData(imageData, 0, 0);
}
}
_init();
</script>
</body>
</html>