使用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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
js继承实现方法详解
Dec 16 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
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
PHP 柱状图实现代码
2009/12/04 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php实现每日签到功能
2018/11/29 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
vue实现购物车案例
2020/05/30 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
python实现飞机大战游戏
2020/10/26 Python
python实现简单银行管理系统
2019/10/25 Python
python interpolate插值实例
2020/07/06 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript