nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法


Posted in NodeJs onNovember 01, 2018

需求描述,由于工作的需要,需要将原本用于1280720的网页改为19201080的网页(电视端页面)。需求可以拆分为两部分,代码部分的修改以及图片的修改。在代码部分,需要将所有位置以及大小相关的值乘以1.5,图片的尺寸也要放大1.5倍。

首先使用nodejs遍历当前的文件夹:

// 遍历所有的文件
var fs = require("fs")
var path = require("path")
var relativePath = '\\test'
// 拿到需要遍历的路径
var root = path.join(__dirname)+relativePath

readDirSync(root)
// 使用异步获取路径
// 参数是遍历文件的根路径
function readDirSync(path){
  var pa = fs.readdirSync(path);
  // 循环遍历当前的文件以及文件夹
  pa.forEach(function(ele,index){
    var info = fs.statSync(path+"\\"+ele)  
    if(info.isDirectory()){
      // console.log("dir: "+ele)
      readDirSync(path+"\\"+ele);
    }else{
      var filePath = path +'\\'+ ele;
      // 找到 .css .html .js 文件
      let fileNameReg = /\.css|\.js|\.html|\.htm/g;
      let shouldFormat = fileNameReg.test(filePath);
      if (shouldFormat) {
        console.log('find file:',filePath);
        // 这里就拿到了符合条件的文件路径,后面就可以根据这个路径来执行相关的操作
      }
    }  
  })
}

如果是HTMLCSSJS文件使用nodejs文件相关api来操作文件,首先是读取到文件,然后是写入文件。代码:

var formatObj = new ChangePosFor4K();// 创建对象,构造函数在下文尾部

function readFile(params) {
  // 读取文件示例
  fs.readFile(params, function (err, data) {
    if (err) {
      console.log('happen an error when read file , error is ' + err)
    }
    else {
      var codeTxt = data.toString();
      // 使用对象来修改文件内容,执行位置以及大小相关值的扩大操作
      var formatReturn = formatObj.formatNumber(codeTxt);
      codeTxt = formatReturn.code;
      // 给不同的文件添加不同的注释
      let jsFileReg = /.js$/i;
      let htmlFileReg = /.html$|.htm$/i;
      let cssFileReg = /.css$/i;
      let tip1 = 'auto formatting tool has check this file.'
      let tip2 = ' block has been handle in this code.'
      let now = new Date();
      if ( jsFileReg.test(params) || cssFileReg.test(params) ) {
        codeTxt += '\n /* '+ tip1 +'*/'
        codeTxt += '\n /* '+ formatReturn.times +' '+ tip2+' at ' + now +'*/'
      } else if(htmlFileReg.test(params)){
        codeTxt += '\n <!-- '+ tip1 +' -->'
        codeTxt += '\n <!-- '+ formatReturn.times +' '+ tip2+' at ' + now +'-->'
      }
      // 将修改好内容写入当前路径的文件
      writeFile(params,codeTxt);
    }
  })  
}


// 写入文件
// fs.writeFile(file, data[, options], callback)
// file - 文件名或文件描述符。
// data - 要写入文件的数据,可以是 String(字符串) 或 Buffer(流) 对象。
// options - 该参数是一个对象,包含 { encoding, mode, flag } 。默认编码为 utf8, 模式为 0666 , flag 为 'w'
// callback - 回调函数,回调函数只包含错误信息参数(err) ,在写入失败时返回。
function writeFile(_path , _txt) {
  fs.writeFile(_path , _txt , function (err) {
    if (err) {
      console.log('happen an error when write file , error is ' + err)
    }
    else{
      console.log("format file success :",_path);
    }
  })
}


// 样式操作相关
/* 
* fun:
*/
function ChangePosFor4K(){
      
  var format = /\d+px/gi;
  var tempSufixx = '@@' // 临时占位符,因为需要靠数字+px的正则来匹配,已经修改过的就不能再有px
  this.formatNumber = function(arg){
    // 匹配出所有的 数字和px的组合 dd.px 
    var initalStr = arg;
    var locIndex = initalStr.search(format); //获取到起始索引
    var changeTimes = 0;

    while(locIndex>0){
      // 拿到值
      var locStr = getFullPos(initalStr , locIndex);
      // 乘以相关比例
      var locValue =Math.ceil(parseInt(locStr) * 1.5); 
      var locReplaceStr = locValue+tempSufixx;
      // 替换
      initalStr = replaceStr(initalStr , locIndex , locStr.length , locReplaceStr);
      locIndex = initalStr.search(format);
      // 计数
      changeTimes++;
    }
    var locReg = new RegExp(tempSufixx,'gi')
    initalStr = initalStr.replace(locReg , 'px');
    return {code:initalStr,times:changeTimes};
  }
  
  // 根据字符串和起始位置找到 xxx.px 字符串
  function getFullPos(_str , _begin){
    var output = '';
    while(output.indexOf('px')<0){// 当没有没有找到完整的字符串
      output += _str.charAt(_begin);
      _begin++;
    }
    return output;
  }

  // 被替换的元素,根据起始索引,替换长度,替换元素 
  function replaceStr( _str , _begin , _len , _subStr ){
    // 首先将字符串和拼接字符串转化为数组
    var strArr = _str.split('');
    var subStrArr = _subStr;
    // 完成替换
    strArr.splice(_begin,_len,subStrArr);
    return strArr.join('');
  }
}

至此代码相关操作就已经结束了,下面来图片操作。这里的图片操作借助了gm,首先通过npm安装gm,并安装ImageMagick或者GraphicsMagick软件。代码:

var fs = require('fs');
// 两个图片操作底层程序可以选择
var gm = require('gm').subClass({ImageMagick: true});
var path = require("path")

var relativePath = '\\test'
var root = path.join(__dirname)+relativePath
// 放大图片并制作副本
function magnifyImg(_path){
  // 获取当前图片的长和宽
  // 将长和宽放大1.5倍
  // 设置新的图片大小
  // 没有直接调用magnify,因为magnify不支持小数
  gm(_path)
  .size(function (err , size){
    if (!err){
      // console.log(size.width > size.height ? 'wider' : 'taller than you');
      let nowWidth =parseInt(size.width) ;
      let nowHeight = parseInt(size.height) ;
      let magnifyWidth = Math.floor( nowWidth * 1.5);
      let magnifyHeight = Math.floor( nowHeight * 1.5);
      gm(_path).resizeExact(magnifyWidth,magnifyHeight).write(_path,function(err){
        if (!err) 
          console.log(_path+'done');
        else
          console.log(_path+'fail'+err);
      })
      
    }
    else{
      console.log('get size has error '+_path + ' and err is : '+err);
    }
  })
}

至此,功能就完成了。

比较有感触的是在操作代码中相关位置以及大小的实现过程,花了一些心思。图片的操作就是百度之后根据别人写的来做的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
轻松创建nodejs服务器(9):实现非阻塞操作
Dec 18 NodeJs
NodeJS学习笔记之FS文件模块
Jan 13 NodeJs
Jquery通过ajax请求NodeJS返回json数据实例
Nov 08 NodeJs
mac下的nodejs环境安装的步骤
May 24 NodeJs
浅析 NodeJs 的几种文件路径
Jun 07 NodeJs
docker中编译nodejs并使用nginx启动
Jun 23 NodeJs
NodeJS使用七牛云存储上传文件的方法
Jul 24 NodeJs
ubuntu编译nodejs所需的软件并安装
Sep 12 NodeJs
nodejs中Express与Koa2对比分析
Feb 06 NodeJs
详解redis在nodejs中的应用
May 02 NodeJs
对mac下nodejs 更新到最新版本的最新方法(推荐)
May 17 NodeJs
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
Apr 29 NodeJs
nodejs中函数的调用实例详解
Oct 31 #NodeJs
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
Oct 17 #NodeJs
Nodejs实现多文件夹文件同步
Oct 17 #NodeJs
深入理解NodeJS 多进程和集群
Oct 17 #NodeJs
CentOS7中源码编译安装NodeJS的完整步骤
Oct 13 #NodeJs
NodeJS加密解密及node-rsa加密解密用法详解
Oct 12 #NodeJs
NodeJS使用Range请求实现下载功能的方法示例
Oct 12 #NodeJs
You might like
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
php数组查找函数总结
2014/11/18 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
python绘制简单折线图代码示例
2017/12/19 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
python压包的概念及实例详解
2021/02/17 Python
学习党章思想汇报
2014/01/07 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
Python中的xlrd模块使用整理
2021/06/15 Python