有个项目是小票打印机需要打印图片，在模板编辑器页面加入图片的时候，需要把彩色的图片变成黑白的显示，以方便显示效果跟打印效果尽可能的保持一致。所以需要用JS来处理图片。第一想的就是用滤镜效果。

vue前端js实现彩色图片变黑白

1、CSS3 filter(滤镜) 属性

使用最简单的，采用css3的滤镜效果，把彩色图片变成黑白色。添加图片css样式：filter: grayscale(100%);


img {
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
}

grayscale()函数是一个内置函数，用于对图像应用滤镜以设置图像的灰度。值0％表示原始图像，而值0％至100％之间的值表示效果的线性乘数。

2、JS对图片进行黑白化处理

这个相对比较麻烦，通过canvas对象计算图片的图片像素值 red，green，blue，alpha，来改变 red，green，blue，alpha 的值。使用getImageData方法，然后对每个像素点进行灰度转换。百度搜索相关案例即可。