基于canvas的图像黑白处理

xiaoxiao2021-02-28  106

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

因为像素点为rgba构成 所以每四个一组,取rgb的平均值,如果rgb的平均值小于100 即为黑色,反之则为白色

最后再给对应的rgb赋值对应的黑白色即可 下面是显示结果 
转载请注明原文地址: https://www.6miu.com/read-42091.html

最新回复(0)