42 lines
1011 B
JavaScript
42 lines
1011 B
JavaScript
import Matrix from './widgets/matrix.js'
|
|
|
|
const matrix = new Matrix(32, 32)
|
|
document.body.appendChild(matrix.element)
|
|
|
|
// DEMO
|
|
const canvas = document.createElement("canvas")
|
|
const context = canvas.getContext('2d')
|
|
const image = new Image()
|
|
|
|
image.src = 'img/00010-938548211.png'
|
|
image.onload = function () {
|
|
context.drawImage(image, 0, 0)
|
|
|
|
//获取图片数据对象
|
|
let imgData = context.getImageData(0, 0, canvas.width, canvas.height)
|
|
|
|
// 分离通道
|
|
let R = []
|
|
let G = []
|
|
let B = []
|
|
for (var i = 0; i < imgData.data.length; i += 4) {
|
|
R.push(imgData.data[i])
|
|
G.push(imgData.data[i + 1])
|
|
B.push(imgData.data[i + 2])
|
|
}
|
|
|
|
// 使用单通道
|
|
for (var i = 0; i < imgData.data.length; i += 4) {
|
|
imgData.data[i + 1] = 0
|
|
imgData.data[i + 2] = 0
|
|
}
|
|
context.putImageData(imgData, 0, 0);
|
|
|
|
// 将图像展示到矩阵中
|
|
for (var i = 0; i < imgData.data.length && i < 4096; i += 4) {
|
|
matrix.setItem(i / 4, 0, imgData.data[i])
|
|
}
|
|
}
|
|
|
|
document.body.appendChild(canvas)
|