基于canvas的图像黑白处理

最新推荐文章于 2024-08-15 15:01:02 发布

everccnight

最新推荐文章于 2024-08-15 15:01:02 发布

阅读量2k

点赞数

分类专栏： canvas 文章标签： canvas javascript 图片识别

本文链接：https://blog.csdn.net/everccnight/article/details/72898696

版权

canvas 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

图像黑白首先需要在彩色照片上进行操作。在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操作。