使用Node.js给图片加水印的方法


Posted in Javascript onNovember 15, 2016

一、准备工作:

首先,确保你本地已经安装好了node环境。

然后,我们进行图像编辑操作需要用到一个Node.js的库:images。

这个库的地址是:https://github.com/zhangyuanwei/node-images,作者定义它为 “Node.js轻量级跨平台图像编解码库” ,并提供了一系列接口。

我们要做的首先是安装images库:

npm install images

二、直接上DEMO:

步骤如下:

step1:文件夹结构

使用Node.js给图片加水印的方法

step2:JS代码

var images = require('images');
var path = require('path');
var watermarkImg = images('water_logo.png');
var sourceImg = images('source.png');
// 比如放置在右下角,先获取原图的尺寸和水印图片尺寸
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.png');

step3:运行node app命令

使用Node.js给图片加水印的方法

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

使用Node.js给图片加水印的方法

step5:最终生成的加水印图片

使用Node.js给图片加水印的方法

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

Javascript 相关文章推荐
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
js实现无缝循环滚动
Jun 23 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
Node.js批量给图片加水印的方法
Nov 15 #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
You might like
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
JavaScript访问样式表代码
2010/10/15 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
js控制frameSet示例
2013/09/10 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
vue分页器组件编写方法详解
2019/06/28 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
营销专业应届生求职信
2013/11/26 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
经典导游欢迎词
2015/01/26 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
小学副班长竞选稿
2015/11/21 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
golang中的struct操作
2021/11/11 Golang