[英]Javascript - How to create an image using canvas based on pixel colors on the site?
[英]use canvas and javascript to read the pixel colors of an image
我想知道是否可以使用畫布和JavaScript掃描圖像中的某些像素顏色,然后使用它們制作地圖。 例如:找到#ff0000
並將其設置為地圖上的數字1,並將#000000
設置為2,依此類推,制作出如下地圖:
var map = [
[1,1,1,1,1],
[1,0,0,0,1],
[1,0,2,0,1],
[1,0,0,0,1],
[1,1,1,1,1]
];
所以基本上我想知道如何獲取代碼以讀取圖像並找到我想要它搜索的顏色,然后將它們繪制在一個變量中
這應該是一個好的開始。
var zeroFill = function(num, padding) {
return Array(padding + 1 - (num + '').length).join('0') + num;
};
var hexColorsToId = {
'ff0000': 1,
'000000': 2
/* ... */
},
map = [],
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
image = new Image;
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0, image.width, image.height);
var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
for (var i = 0; i < data.length; i += 4) {
var red = zeroFill(data[i].toString(16), 2),
green = zeroFill(data[i + 1].toString(16), 2),
blue = zeroFill(data[i + 2].toString(16), 2),
hex = red + green + blue;
if (hexColorsToId.hasOwnProperty(hex)) {
map.push(hexColorsToId[hex]);
}
}
};
image.src = '/img/logo.png';
當然,您可以使用畫布中的單個像素。 這是一個教程: http : //tutorials.jenkov.com/html5-canvas/pixels.html
但是您可以在網上找到許多其他網站!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.