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 document.createDocumentFragment()
Apr 04 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
jQuery的事件预绑定
Dec 05 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
vue实现表单录入小案例
Sep 27 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 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
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
Sanic框架Cookies操作示例
2018/07/17 Python
详解python中sort排序使用
2019/03/23 Python
Python交互式图形编程的实现
2019/07/25 Python
python属于解释语言吗
2020/06/11 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
自荐书模板
2013/12/19 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
搞笑创意广告语
2014/03/17 职场文书
个人融资协议书
2014/10/02 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
对公司的意见和建议
2015/06/04 职场文书
Python jiaba库的使用详解
2021/11/23 Python
分享7个 Python 实战项目练习
2022/03/03 Python
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
Mysql 一主多从的部署
2022/05/20 MySQL