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 相关文章推荐
JS的千分位算法实现思路
Jul 31 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
Angular5.1新功能分享
Dec 21 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 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
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
phpStorm2020 注册码
2020/09/17 PHP
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
javascript获取元素的计算样式
2019/05/24 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
基于python中theano库的线性回归
2018/08/31 Python
Python中new方法的详解
2019/01/15 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
python 实现单通道转3通道
2019/12/03 Python
python代码如何注释
2020/06/01 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
教师辞职报告范文
2014/01/20 职场文书
买房协议书
2014/04/11 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
人力资源部岗位职责
2015/02/11 职场文书
护士年终个人总结
2015/02/13 职场文书
限期整改通知书
2015/04/22 职场文书
运动会表扬稿范文
2015/05/05 职场文书
《花钟》教学反思
2016/02/17 职场文书