nodejs 对 png 图片的像素级别处理

使用node对图片的像素进行处理

这里使用常见的图片灰度处理为例子：

这里用到一个 canvas 的库，本质上是调用的 c++ ,通过 c++ 调用显卡渲染。

可以做到和前端的 canvas 一样的api处理，但是效果更好。

npm i canvas

　　

如果发现报错，以管理员权限打开 cmd

//先运行一下这个命令
npm install --global --production windows-build-tools
//安装的好像是一个python运行环境,中间有一个绿色的框框,结尾是python
//提示+ windows-build-tools@5.2.2
// updated 1 package in 107.732s说明安装成功

//然后运行命令 ,好像是全局安装这个包,英语小白,看不懂
npm install -g node-gyp

//最后会提示一堆中文,===创建代码=== === 生成代码===复制啥的===说明安装成功

//然后把已经下载的node-modules文件删除,从新执行命令
npm install canvas  //安装依赖就搞定了

　　

一个简单的例子：图片灰度处理

const { createCanvas, loadImage } = require('canvas')
const fs = require("fs");

async function main(){
	const myimg = await loadImage('./image/b.png');
	const canvas = createCanvas(myimg.width, myimg.height)
	const ctx = canvas.getContext('2d');
	ctx.drawImage(myimg,0,0);
	let imgData = ctx.getImageData(0,0,myimg.width, myimg.height);
	let data = imgData.data;
	for(let i = 0; i < data.length; i++){
		var avg=(data[i]+data[i+1]+data[i+2])/3;
		//var avg = data[i]* 0.3 + data[i+1]* 0.59 + data[i+2]* 0.11
		data[i] = avg;
		data[i+1] = avg;
		data[i+2] = avg;
	}
	ctx.putImageData(imgData,0,0);
	canvas.createPNGStream().pipe(fs.createWriteStream("./out.png"));

}

main();

　　

详细的 API 操作，可以去看官方的文档，非常详情