nodejs 图片的像素级别处理
2019-12-23 14:59 muamaker 阅读(4006) 评论(2) 编辑 收藏 举报使用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 操作,可以去看 官方的文档,非常详情