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 相关文章推荐
jquery BS,dialog控件自适应大小
Jul 06 Javascript
js获取 type=radio 值的方法
May 09 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
Vue router安装及使用方法解析
Dec 02 Vue.js
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本地服务器分享
2013/02/19 PHP
php bootstrap实现简单登录
2016/03/08 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
jQuery 选择器理解
2010/03/16 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
Ajax基础知识详解
2017/02/17 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python字符串拼接的几种方法整理
2017/08/02 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
文明礼貌演讲稿
2014/05/12 职场文书
师范生求职自荐信
2014/06/14 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
兵马俑导游词
2015/02/02 职场文书
致运动员加油稿
2015/07/21 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python