基于canvas的图像黑白处理

最新推荐文章于 2025-01-19 09:45:00 发布

原创最新推荐文章于 2025-01-19 09:45:00 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #javascript #图片识别

canvas 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript在canvas上将彩色图像转换为黑白的方法。通过获取图像的像素数据并计算RGB平均值来决定每个像素点的颜色。若平均值大于等于100则设为白色，否则设为黑色。

图像黑白首先需要在彩色照片上进行操作。在canvas上把彩色照片操作为黑白照片，其实就是对其像素点的操作

先贴代码，再做讲解

ctx.drawImage(imgs, 0, 0,width,height);
            var pixels = ctx.getImageData(0,0,width,height);
            var pixeldata = pixels.data;
            for(var i=0,len = pixeldata.length ;i<len;i+=4){
                var black =( pixels.data[i] + pixels.data[i+1] + pixels.data[i+2])/3;
                if(black>=100){
                    black = 255
                }else{
                    black = 0;
                }
                pixels.data[i] = black;
                pixels.data[i+1] = black;
                pixels.data[i+2] = black;
            }

首先先把图片放置到ctx画布上再获取花部的像素点；为了优化js 希望for循环按照我的方式进行，减少js操作。