用node.js给图片加水印

一、准备工作:

首先,确保你本地已经安装好了node环境。
然后,我们进行图像编辑操作需要用到一个Node.js的库:images
这个库的地址是:https://github.com/zhangyuanwei/node-images,作者定义它为 “Node.js轻量级跨平台图像编解码库” ,并提供了一系列接口。
我们要做的首先是安装images库:

npm install images

二、直接上DEMO:

步骤如下:
step1:文件夹结构

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命令

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

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

时间: 2024-07-29 22:56:34

用node.js给图片加水印的相关文章

文件上传,图片加水印

文件上传: 所用控件:FileUpload 使用时的思路: 1.判断用户是否选中了文件 FileUpload.FileName获取选中的文件名,判断长度,如果长度大于零就代表已经选择了文件 JS端:通过ID获取控件,然后控件的value获取选中的文件名 2.将文件保存到服务器上 FileUpload.SaveAs("绝对路径"); 3.获得绝对路径 先编写相对路径:比如"UpLoads/abc.txt" 再把路径映射成绝对路径:Server.MapPath(&quo

图片上传,图片加水印,验证码制作

文件上传: 所用控件:FileUpload 使用时的思路: 1.判断用户是否选中了文件 FileUpload.FileName获取选中的文件名,判断长度,如果长度大于零就代表已经选择了文件 JS端:通过ID获取控件,然后控件的value获取选中的文件名 2.将文件保存到服务器上 FileUpload.SaveAs("绝对路径"); 3.获得绝对路径 先编写相对路径:比如"UpLoads/abc.txt" 再把路径映射成绝对路径:Server.MapPath(&quo

js判断图片加载完成

<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <img id="mainPic" src="http://img1c.xgo-img

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

今天分享一下thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印.博主是新手,在这里卡住了很久(>_<) thinkphp 3.2.3整合ueditor 1.4 下载地址:https://github.com/Nintendov/Ueditor-thinkphp 下载下来,看着配置就可以了. 下面就是给上传图片加水印: (在做这步前,请确保ueditor已经正常工作) 我的工程目录如下: fonts里面的fz.fft为水印字体 images里面的logo.png为水印图片

java 图片加水印,设置透明度。说明很详细

package com.yidao.common; import java.awt.AlphaComposite; import java.awt.Graphics2D; import java.awt.Image; import java.awt.RenderingHints; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import java.io.Out

nginx实现动态分离,解决css和js等图片加载问题

改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 <a href="http://www.cnblogs.com/sz-jack/p/5200283.html">http://www.cnblogs.com/sz-jack/p/5200283.html</a>

利用PHP为图片加水印

1.为图片加风格字体 <?php header('Content-type:image/jpeg');//告诉服务器用JPEG图像格式输出 $img=imagecreatefromjpeg('images/girl.jpg');//建立背景图像 $color=imagecolorallocate($img,100,100,100);//分配给字体的颜色 $width=imagesx($img);//输出背景图像的总宽度 $height=imagesy($img);//输出背景图像的总长度 $po

iOS图片加水印效果的实现并保存至相冊

图片加水印效果的实现并保存至相冊 实现效果如图: project下载:githubproject下载链接 代码: - (void)viewDidLoad { [super viewDidLoad]; UIImage *image = [UIImage imageNamed:@"pushu.jpg"]; UIImage *waterImage = [self waterMarkImage:image withText:@"朴树水印測试"]; UIImageWriteT

PHP给图片加水印具体实现

给图片加水印实现方法如下: 1 class Mark 2 { 3 public function __construct() 4 { 5 6 } 7 8 /** 9 * 加水印 10 * @param file $srcImg 要加水印的图片 11 * @param file $waterImg 水印图片 12 * @param integer $position 水印图片放置位置 1:左上,2:右上,3:居中,4:左下,5:右下 13 * @param integer $alpha 水印图片透