nodejs 圖片的像素級別處理

使用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 操作，可以去看 官方的文檔，非常詳情