zoukankan      html  css  js  c++  java
  • 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 操作,可以去看 官方的文档,非常详情

  • 相关阅读:
    Leetcode: Largest Rectangle in Histogram
    Leetcode: Sum Root to Leaf Numbers
    Leetcode: LRU Cache
    Leetcode: Candy
    Leetcode: Interleaving String
    Leetcode: Implement strStr()
    Leetcode: Gray Code
    Leetcode: Restore IP addresses
    Leetcode: Median of Two Sorted Arrays
    Leetcode: Pow(x, n) and Summary: 负数补码总结
  • 原文地址:https://www.cnblogs.com/muamaker/p/12083790.html
Copyright © 2011-2022 走看看