当前位置：首页 > news >正文

Nodejs实现图片加水印【使用jimp】

news 来源：原创 2024/9/19 16:18:37

Nodejs实现图片加水印【使用jimp】

先看效果

我们将使用jimp实现图片加上水印，可以结合路由进行用户上传后处理该图片生成带水印的图片返回个用户
在这里插入图片描述

const path = require("path");
const jimp = require("jimp");/*** 给一张图片加水印* @param {string} waterFile - 水印图片的文件路径* @param {string} originFile - 原始图片的文件路径* @param {string} targetFile - 输出的带水印图片的文件路径* @param {number} [proportion=5] - 水印相对于原始图片的比例* @param {number} [marginProportion=0.01] - 水印相对于原始图片边距的比例* @param {number} [opacity=0.3] - 水印图片的透明度*/
async function mark(waterFile,originFile,targetFile,proportion = 5,marginProportion = 0.01,opacity = 0.5
) {// 并行读取水印图片和原始图片const [water, origin] = await Promise.all([jimp.read(waterFile),jimp.read(originFile),]);// 计算水印图片需要缩放的比例const curProportion = origin.bitmap.width / water.bitmap.width;// 按照比例缩放水印图片water.scale(curProportion / proportion);// 设置水印图片的透明度water.opacity(opacity);// 计算水印图片的旋转角度water.rotate(-45);// 水印平铺const watermarkWidth = water.bitmap.width;const watermarkHeight = water.bitmap.height;for (let y = -watermarkHeight; y < origin.bitmap.height + watermarkHeight; y += watermarkHeight) {for (let x = -watermarkWidth; x < origin.bitmap.width + watermarkWidth; x += watermarkWidth) {origin.composite(water, x, y, {mode: jimp.BLEND_SOURCE_OVER,opacitySource: opacity,});}}// 将带水印的图片写入到目标文件await origin.write(targetFile);
}// 测试函数，用于演示给图片加水印
async function test() {// 定义水印图片、原始图片和目标图片的路径const waterPath = path.resolve(__dirname, "./IMG.jpg");const originPath = path.resolve(__dirname, "./vuelogo.png");const targetPath = path.resolve(__dirname, "./new.jpg");// 给图片加水印await mark(waterPath, originPath, targetPath);
}// 调用测试函数
test();

还可以对其进行改造生成不同尺寸的水印图片

const path = require("path");
const jimp = require("jimp");/*** 给一张图片加水印* @param {string} waterFile - 水印图片的文件路径* @param {string} originFile - 原始图片的文件路径* @param {string} targetFile - 输出的带水印图片的文件路径* @param {number} [proportion=5] - 水印相对于原始图片的比例* @param {number} [marginProportion=0.01] - 水印相对于原始图片边距的比例* @param {number} [opacity=0.5] - 水印图片的透明度*/
async function mark(waterFile,originFile,targetFile,proportion = 5,marginProportion = 0.01,opacity = 0.5
) {// 并行读取水印图片和原始图片const [water, origin] = await Promise.all([jimp.read(waterFile),jimp.read(originFile),]);// 计算水印图片需要缩放的比例const curProportion = origin.bitmap.width / water.bitmap.width;// 按照比例缩放水印图片water.scale(curProportion / proportion);// 设置水印图片的透明度water.opacity(opacity);// 计算水印图片的旋转角度water.rotate(-45);// 水印平铺const watermarkWidth = water.bitmap.width;const watermarkHeight = water.bitmap.height;for (let y = -watermarkHeight; y < origin.bitmap.height + watermarkHeight; y += watermarkHeight) {for (let x = -watermarkWidth; x < origin.bitmap.width + watermarkWidth; x += watermarkWidth) {origin.composite(water, x, y, {mode: jimp.BLEND_SOURCE_OVER,opacitySource: opacity,});}}// 将带水印的图片写入到目标文件await origin.write(targetFile);
}// 测试函数，用于演示给图片加水印
async function test() {// 定义水印图片、原始图片和目标图片的路径const waterPath = path.resolve(__dirname, "./IMG.jpg");const originPath = path.resolve(__dirname, "./vuelogo.png");// 生成三种不同尺寸的水印图片const targetPathSmall = path.resolve(__dirname, "./new_small.jpg");const targetPathMedium = path.resolve(__dirname, "./new_medium.jpg");const targetPathLarge = path.resolve(__dirname, "./new_large.jpg");// 给图片加小尺寸水印await mark(waterPath, originPath, targetPathSmall, 10, 0.01, 0.5);// 给图片加中等尺寸水印await mark(waterPath, originPath, targetPathMedium, 5, 0.01, 0.5);// 给图片加大尺寸水印await mark(waterPath, originPath, targetPathLarge, 2.5, 0.01, 0.5);
}// 调用测试函数
test();