Node.js批量给图片加水印的方法


Posted in Javascript onNovember 15, 2016

一、准备工作:

首先,你要阅读完这篇文章:https://3water.com/article/97391.htm。

然后,我们安装node.js的一个模块:imageinfo。

npm install imageinfo

二、直接上DEMO:

步骤如下:

step1:文件夹结构

Node.js批量给图片加水印的方法

step2:JS代码

//引用文件系统模块
var fs = require("fs");
//引用imageinfo模块
var imageInfo = require("imageinfo");
//引用images模块
var images = require('images');
var watermarkImg = images('water_logo.png');
function readFileList(path, filesList) {
var files = fs.readdirSync(path);
files.forEach(function (itm, index) {
var stat = fs.statSync(path + itm);
if (stat.isDirectory()) {
//递归读取文件
readFileList(path + itm + "/", filesList)
} else {
var obj = {};//定义一个对象存放文件的路径和名字
obj.path = path;//路径
obj.filename = itm//名字
filesList.push(obj);
}
})
}
var getFiles = {
//获取文件夹下的所有文件
getFileList: function (path) {
var filesList = [];
readFileList(path, filesList);
return filesList;
},
//获取文件夹下的所有图片
getImageFiles: function (path) {
var imageList = [];
this.getFileList(path).forEach((item) => {
var ms = imageInfo(fs.readFileSync(item.path + item.filename));
ms.mimeType && (imageList.push(item.filename))
});
return imageList;
}
};
//获取文件夹下的所有图片
var photos = getFiles.getImageFiles("./public/");
for (var i = 0; i < photos.length; i++) {
var sourceImg = images('./public/'+photos[i]);
var sourceImgName = photos[i];
var sWidth = sourceImg.width();
var sHeight = sourceImg.height();
var wmWidth = watermarkImg.width();
var wmHeight = watermarkImg.height();
images(sourceImg)
// 设置绘制的坐标位置,右下角距离 40px
.draw(watermarkImg, sWidth - wmWidth - 40, sHeight - wmHeight - 40)
// 保存格式会自动识别
.save('./saveImg/'+ sourceImgName+'');
}

step3:运行node命令后,文件夹结构如下图

Node.js批量给图片加水印的方法

step4:查看批量加水印的图片

Node.js批量给图片加水印的方法

以上所述是小编给大家介绍的Node.js批量给图片加水印的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
setTimeout学习小结
Feb 08 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
Ajax实现三级联动效果
Oct 05 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 #Javascript
AngularJS extend用法详解及实例代码
Nov 15 #Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 #Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 #Javascript
javascript实现消灭星星小游戏简单版
Nov 15 #Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 #Javascript
禁用backspace网页回退功能的实现代码
Nov 15 #Javascript
You might like
PHPMailer安装方法及简单实例
2008/11/25 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
Python实现删除文件但保留指定文件
2015/06/21 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
pytorch 数据集图片显示方法
2018/07/26 Python
python看某个模块的版本方法
2018/10/16 Python
python连接mongodb集群方法详解
2020/02/13 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
中国央视网签名寄语
2014/01/18 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
个人租房协议书样本
2014/10/01 职场文书
党员民主评议个人总结
2014/10/20 职场文书
婚礼新人答谢词
2015/01/04 职场文书
师范生小学见习总结
2015/06/23 职场文书
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS