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 中关于CSS操作部分使用说明
Jun 10 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
php 分页原理详解
2009/08/21 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php三元运算符知识汇总
2015/07/02 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
详解Python命令行解析工具Argparse
2016/04/20 Python
Python中的变量和作用域详解
2016/07/13 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
地理教师岗位职责
2014/03/16 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
2015年推普周活动方案
2015/05/06 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
Python&Matlab实现樱花的绘制
2022/04/07 Python
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers