Javascript 按像素更改图像的颜色

我想把图像的三分之一变成红色，三分之一变成绿色，三分之一变成蓝色（都是指宽度。我的意思是像法国国旗一样，但是有红色、绿色和蓝色），但是我的代码除了显示图像外什么都不做

函数func（im）{
设w=im.getWidth（）；
设w1=w/3，
w2=w/3+1，
w3=w/3+w/3；
for（让im.values（）的pix）{
设y=pix.getY（）；
如果（y w1&&y我想你会想看看使用
PIL
的图像。你可以将图像分割成三个单独的图像/阵列，为每一个图像着色，然后重新组合着色图像。
可以从画布中获取像素数据并修改像素

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

确定您所在的x位置（
pixel%行
）
使用该值确定您所在的列（
x/ctx.canvas.width
）
修改正确的颜色通道（红色、绿色或蓝色）以更改强度

例子
这绝不是一个完整的示例，只是对画布数据应用像素过滤器概念的说明


let ctx=document.querySelector（'#draw'）.getContext（'2d'））
var img=新图像（）
img.addEventListener（'load'，（e）=>drawOnLoad（ctx，img），false）
img.src=https://i.stack.imgur.com/hS81J.png'
功能图纸加载（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）
}
函数drawImageScaled（ctx、img）{
让canvas=ctx.canvas
设cw=canvas.width，ch=canvas.height
设iw=img.宽度，ih=img.高度
设sx=cw/iw，sy=ch/ih
let比率=数学最小值（sx，sy）
设x=（cw-iw*比）/2，y=（ch-ih*比）/2
ctx.clearRect（0，0，cw，ch）
ctx.drawImage（图像，0，0，iw，ih，x，y，iw*比率，ih*比率）
}
函数applyFilter（ctx）{
让imageData=ctx.getImageData（0，0，ctx.canvas.width，ctx.canvas.height）
让data=imageData.data
设像素=data.length/4
设pixelsPerRow=pixels/ctx.canvas.width
让行=Math.ceil（像素/像素箭头）
用于（让像素=0；像素<像素；像素++）{
设x=像素%行
设y=数学地板（像素/像素箭头）
设r=数据[像素*4]
设g=数据[像素*4+1]
设b=数据[像素*4+2]
var avg=数学四舍五入（（r+g+b）/3）；
设px=x/ctx.canvas.width
如果（px 0.33&&px