水印云-轻松美化图片视频

图片视频一键去水印,手机电脑均可使用

用程序员的方式教你如何加水印

发布日期:2021-11-15 11:54 发表者:水印云 浏览次数:4468次

加水印怎么加?你可能会说用PS、用美图秀秀或者某某软件,没错,这是普通人的加水印方法,对于程序员来说,加水印,当然要从代码的方式着手啦,一起看看吧!

加水印实现方式

水印的实现方式有很多,根据实现功能的人员分工可以分为前端水印和后端水印,前端水印的优点可以总结为三点,第一,可以不占用服务器资源,完全依赖客户端的计算能力,减少服务端压力。第二,速度快,无论哪种前端的实现方式,性能都是优于后端的。第三,实现方式简单。后端实现水印的最大优势也可以总结为三点,就是安全,安全,安全。知乎,微博都是采用后端实现的水印方案。但是综合考虑,我们还是采用前端实现水印的方案。下面也会简单介绍下 nodejs 怎么实现后端图片水印。

node实现

提供三个 npm 包,本部分不是我们文章的重点,只提供简单的 demo。1,gmhttps://github.com/aheckmann/gm 6.4k star

const fs = require('fs');const gm = require('gm');gm('/path/to/my/img.jpg').drawText(30, 20, "GMagick!").write("/path/to/drawing.png", function (err) {if (!err) console.log('done');});需要安装 GraphicsMagick 或者 ImageMagick;2,node-images:https://github.com/zhangyuanwei/node-images

var images = require("images");images("input.jpg") //Load image from file //加载图像文件 .size(400) //Geometric scaling the image to 400 pixels width//等比缩放图像到400像素宽 .draw(images("logo.png"), 10, 10) //Drawn logo at coordinates (10,10)//在(10,10)处绘制Logo .save("output.jpg", { //Save the image to a file, with the quality of 50quality : 50//保存图片到文件,图片质量为50 });不需要安装其他工具,轻量级,zhangyuanwei 国人开发,中文文档;3,jimp:https://github.com/oliver-moran/jimp可搭配 gifwrap 实现 gif 水印;

前端实现

1,背景图实现全屏水印

可以到阿里内外个人信息页面查看效果,原理:

优点:图片是后端生成,安全;缺点:需要发起 http 请求,获取图片信息;效果展示:由于是内部系统,不方便展示效果。

2,dom 实现全图水印和图片水印

在图片的 onload 事件里获取图片宽高,根据图片大小生成水印区域,遮挡在图片上层,dom 内容为水印的文案或者其他信息,实现方式比较简单。

const wrap = document.querySelector('#ReactApp');const { clientWidth, clientHeight } = wrap;const waterHeight = 120;const waterWidth = 180;// 计算个数const [columns, rows] = [~~(clientWidth / waterWidth), ~~(clientHeight / waterHeight)]for (let i = 0; i


是不是看的云里雾里,以上就是简单的加水印方法啦!

标签: 加水印 教程