需求描述,由于工作的需要,需要将原本用于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); } }) }
至此,功能就完成了。
比较有感触的是在操作代码中相关位置以及大小的实现过程,花了一些心思。图片的操作就是百度之后根据别人写的来做的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年11月14日
2024年11月14日
- 窦唯1994《黑梦》上海音像首版[WAV分轨][1G]
- 郭子.1996-为爱偷生(载歌载舞歌载戏“极度疯狂”唱作全纪录)【滚石】【WAV+CUE】
- 伍佰.2003-泪桥【艾回】【WAV+CUE】
- 南台湾小姑娘.1996-爱作梦的查某囡仔【大旗】【WAV+CUE】
- 群星《天碟落地-世界[HI-FI] 女声》[WAV分轨][1.1G]
- 黎明《但愿不只是朋友》2022蜚声环球限量版 [WAV+CUE][1G]
- 李玉刚《怀旧辑》玉泽东方[WAV+CUE][1.1G]
- 魔兽世界wlk刺杀贼一键输出宏是什么 wlk刺杀贼一键输出宏介绍
- 魔兽世界wlk战斗贼一键输出宏是什么 wlk战斗贼一键输出宏介绍
- 魔兽世界wlk敏锐贼一键输出宏是什么 wlk敏锐贼一键输出宏介绍
- 李逸朗2007-李威乐[英皇娱乐][WAV+CUE]
- DavidVersace-EyetoEye(2024)[24-44,1]
- SimoneLamsma,RobertKulek-Mendelssohn,Janacek,Schumann-SonatasforViolinandPiano【SAC
- 《街头篮球》大动作:新增五大服务器节点 优化玩家体验
- 任天堂宣布推出音乐APP!仅面向NSO订阅用户