一、准备工作:

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

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

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

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

npm install images

二、直接上DEMO:

步骤如下:

step1:文件夹结构

step2:JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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命令

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

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

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

使用Node.js给图片加水印的方法的更多相关文章

  1. 用node.js给图片加水印

    一.准备工作: 首先,确保你本地已经安装好了node环境.然后,我们进行图像编辑操作需要用到一个Node.js的库:images.这个库的地址是:https://github.com/zhangyua ...

  2. php 分享两种给图片加水印的方法

    本文章向码农们介绍 php 给图片加水印的两种方法,感兴趣的码农可以参考一下本文章的源代码. 方法一:PHP最简单的加水印方法 <?php // http://www.manongjc.com ...

  3. JS判断图片加载完成方法

    javascipt原生方法 选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示. <img id="pic1" src=&quo ...

  4. 如何用node.js批量给图片加水印

    上一篇我们讲了如何用node.js给图片加水印,但是只是给某一张图片加,并没有涉及到批量处理.这一篇,我们学习如果批量进行图片加水印处理. 一.准备工作: 首先,你要阅读完这篇文章:http://ww ...

  5. PHP给图片加水印具体实现

    给图片加水印实现方法如下: class Mark { public function __construct() { } /** * 加水印 * @param file $srcImg 要加水印的图片 ...

  6. c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合,找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理(完全指北)

    c#封装DBHelper类   public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...

  7. 火车头dede采集接口,图片加水印,远程图片本地化,远程无后缀的无图片本地化

    <?php /* [LocoySpider] (C)2005-2010 Lewell Inc. 火车采集器 DedeCMS 5.7 UTF8 文章发布接口 Update content: 图片加 ...

  8. thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印

    今天分享一下thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印.博主是新手,在这里卡住了很久(>_<) thinkphp 3.2.3整合ueditor 1.4 下载 ...

  9. PHPThumb处理图片,生成缩略图,图片尺寸调整,图片截取,图片加水印,图片旋转

    [强烈推荐]下载地址(github.com/masterexploder/PHPThumb). 注意这个类库有一个重名的叫phpThumb,只是大小写的差别,所以查找文档的时候千万注意. 在网站建设过 ...

随机推荐

  1. shiro 退出过滤器 logout ---退出清除HTTPSession数据

    重写LogouFilter类 import org.apache.shiro.web.filter.authc.LogoutFilter; public class ShiroLogoutFilter ...

  2. C#实现创建、编辑NX表达式

    在NX8.5中使用C#编辑表达式中有个坑,part.Expressions.Edit该方法鲁棒性很差,当表达式有错时也能编辑成功(手动在NX中增加错误表达式会有弹框,无法创建,而该方法却可以,疑是bu ...

  3. React 服务端渲染方案完美的解决方案

    最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法.在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢? 什么是服务 ...

  4. react-router 路由切换动画

    路由切换动画 因为项目的需求,需要在路由切换的时候,加入一些比较 zb 的视觉效果,所以研究了一下.把这些学习的过程记录下来,以便以后回顾.同时也希望这些内容能够帮助一些跟我一样的菜鸟,让他们少走些坑 ...

  5. Redis小记(三)

    1.复制 通过slaveof命令或设置slaveof选项,实现一个服务器去复制另一个服务器,被复制的是主服务器,执行复制的是从服务器,复制过程中主从双方数据库保持数据一致 2.8版本以前,可分为初次复 ...

  6. sysfs是什么??

    来源:https://blog.csdn.net/qq_36412526/article/details/83751520 第一次接触:sysfs, 这里记录过程: 原文:Documenttation ...

  7. matlab中upper 将字符串转换为大写

    参考:https://ww2.mathworks.cn/help/matlab/ref/fprintf.html?searchHighlight=fprintf&s_tid=doc_srcht ...

  8. Python自学02day——变量和简单的数据类型

    1.变量是什么? 变量存储在内存中的值,这就意味着在创建变量时会在内存中开辟一个空间. 基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中. 因此,变量可以指定不同的数据类型, ...

  9. CSS语法规范与代码风格

    CSS语法规范与代码风格 1. 语法规范 CSS规则又两个主要的部分构成:选择器+一条或多条声明. 选择器:用于指定CSS样式的HTML标签,花括号内的是设置的具体样式 属性与属性值以键值对的形式出现 ...

  10. 多测师讲解IDE工具python_001.2pycham_安装

    PyCharm安装使用教程 Pycharm 是目前 Python 语言最好用的集成开发工具. 下载 Pycharm 载时有两种版本选择 Professional(专业版,收费)和Community(社 ...