Question

我想将图像的三分之一变成红色，将绿色变成三分之一，然后将蓝色变成三分之一（全部按宽度表示。我的意思是像法国的国旗，但是带有红色，绿色和蓝色），但是我的代码除了显示图像之外什么也不做

function func(im) {
  let w = im.getWidth();
  let w1 = w / 3,
      w2 = w / 3 + 1,
      w3 = w / 3 + w / 3;
  for (let pix of im.values()) {
    let y = pix.getY();
    if (y <= w1) pix.setRed(255);
    else if (y > w1 && y <= w2) pix.setGreen(255);
    else pix.setBlue(255);
  }
}

let imm = new SimpleImage("https://i.imgur.com/yaYZaHk.jpg");
func(imm);
print(imm);

Answer 1

我想您会想看看使用PIL的{{3}}。您可以将图像分成三个单独的图像/阵列，对每种颜色进行着色，然后重新组合着色的图像。

Answer 2

可以从画布中获取像素数据并修改像素。

这不是最优雅的解决方案，但您需要做的只是：

确定您位于（devDependencies的x位置
使用该值确定您所在的列（npm --production=false install）
修改正确的颜色通道（红色，绿色或蓝色）以更改强度

示例

这绝不是一个完整的示例，仅是将像素过滤器应用于画布数据的概念的说明。

pixel % rows

x / ctx.canvas.width

let ctx = document.querySelector('#draw').getContext('2d')

var img = new Image()
img.addEventListener('load', (e) => drawOnLoad(ctx, img), false)
img.src = 'https://i.stack.imgur.com/hS81J.png'

function drawOnLoad(ctx, img) {
  ctx.fillStyle = '#FFF'
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
  //drawImageScaled(ctx, img)
  ctx.fillStyle = '#0F0'
  ctx.font = '45px Verdana'
  ctx.textBaseline = 'middle'
  ctx.textAlign = 'center'
  ctx.fillText('Hello World', ctx.canvas.width / 2, ctx.canvas.height / 2)
  applyFilter(ctx)
}

function drawImageScaled(ctx, img) {
  let canvas = ctx.canvas
  let cw = canvas.width, ch = canvas.height
  let iw = img.width, ih = img.height
  let sx = cw / iw, sy = ch / ih
  let ratio = Math.min(sx, sy)
  let x = (cw - iw * ratio) / 2, y = (ch - ih * ratio) / 2
  ctx.clearRect(0, 0, cw, ch)
  ctx.drawImage(img, 0, 0, iw, ih, x, y, iw * ratio, ih * ratio)
}

function applyFilter(ctx) {
  let imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height)
  let data = imageData.data
  let pixels = data.length / 4
  let pixelsPerRow = pixels / ctx.canvas.width
  let rows = Math.ceil(pixels / pixelsPerRow)
  for (let pixel = 0; pixel < pixels; pixel++) {
    let x = pixel % rows
    let y = Math.floor(pixel / pixelsPerRow)
    let r = data[pixel * 4]
    let g = data[pixel * 4 + 1]
    let b = data[pixel * 4 + 2]
    var avg = Math.round((r + g + b) / 3);
    let px = x / ctx.canvas.width
    if (px <= 0.33) {
      data[pixel * 4    ] -= ((r / avg) * 127);
      data[pixel * 4 + 1] -= ((g / avg) * 127);
      data[pixel * 4 + 2] += ((b / avg) * 127);
    } else if (px > 0.33 && px <= 0.66) {
      data[pixel * 4    ] += ((r / avg) * 127);
      data[pixel * 4 + 1] += ((g / avg) * 127);
      data[pixel * 4 + 2] += ((b / avg) * 127);
    } else {
      data[pixel * 4    ] += ((r / avg) * 127);
      data[pixel * 4 + 1] -= ((g / avg) * 127);
      data[pixel * 4 + 2] -= ((b / avg) * 127);
    }
  }
  ctx.putImageData(imageData, 0, 0)
}

按像素更改图像的颜色

2 个答案:

示例