sakuya/main.js

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)