要實現什么##
同事想做一張世界地圖的背景圖，但是網上找的圖片都太low了。他想用那種密集的點陣組成的世界地圖。作為程序員，想法當然是通過圖片處理，識別像素點，然后生成新的圖片。
目標是這樣的：
實現思路##
其實稍微想一下就很容易想明白：
1. 獲取圖片數據
2. 分析像素點，判斷是不是空白 （每個像素點的rgb色值不是255或某個閾值： r<255 || g<255 || b<255），就替換成指定顏色像素點
3. 把圖片划分成像素塊， 某一個像素塊里空白面積小於 50%（看需求設定閾值），判斷為填充點，否則變為透明。
4. 重新繪制圖片。
不拘泥於語言，基本思路都是這樣。下面是一個Canvas版本：
<!DOCTYPE html>
<html lang="zh-CN" class=" no-touch"><head>
<head><title>Canvas 轉點陣</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">
// 判斷像素塊是否空白or像素覆蓋
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;
// 閾值設為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;
}
// 點陣轉換
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 {
// 其他區域直接清空
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);
// 獲取像素數據
var imageData = ctx.getImageData(0, 0, cvs.width, cvs.height);
// 轉換
imageData = convertPointArray(imageData);
// 擦除原來的圖片
ctx.clearRect(0, 0, cvs.width, cvs.height);
// 重新繪圖
ctx.putImageData(imageData, 0, 0);
}
}
_init();
</script>
</body>
</html>