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

nodejs第三方库sharp对图片的操作生成新图片、压缩、添加文字水印及图片水印等

Sharp是一个基于libvips的高性能Node.js图像处理库,它提供了广泛的功能,包括调整大小、裁剪、旋转、格式转换等。Sharp可以处理多种图像格式,并且能够高效地转换图像格式。
相关说明及用法看:https://sharp.nodejs.cn/
安装:Sharp:npm install sharp
以及安装:npm install --save text-to-svg
text-to-svg将文本转换为SVG路径,而无需本地依赖,相关用法及说明看https://www.npmjs.com/package/text-to-svg
上代码

const sharp=require('sharp');
const fs=require('fs');
const textToSvg=require('text-to-svg');const basePicture=`${__dirname}/img/123.jpg`;//转化Buffer流对象,并将buffer流合并成一个,并期约返回
function streamToBuffer(stream)
{return new Promise((resolve,reject)=>{const bufferList=[];//图片流数据stream.on('data',data=>{bufferList.push(data);})stream.on('error',err=>{reject();})//end为追加数据stream.on('end',()=>{//这里是合并buffer对象resolve(Buffer.concat(bufferList));})})
}//生成新图片,并追加新图片的格式大小覆盖区域等
function dealWithStream(basePicture)
{const readableStream=fs.createReadStream(basePicture);const transformer=sharp().resize({width:100,height:100,fit:sharp.fit.cover,position:sharp.strategy.entropy})//console.log(transformer);//将transformer流数据追加进行处理readableStream.pipe(transformer);streamToBuffer(transformer).then(function(newPicBuffer){//写入新图片中fs.writeFile(`${__dirname}/img/water.png`,newPicBuffer,function(err){if(err){console.log(err);return;}console.log('done');})})}//dealWithStream(basePicture);
//将图片转为jpeg,并对jpeg文件进行处理
function dealWithBuffer(basePicture)
{sharp(basePicture).resize(800,600,{fit:sharp.fit.inside,withoutEnlargement:true}).toFormat('webp').toBuffer().then(function(outputBuffer){fs.writeFile(`${__dirname}/img/3.webp`,outputBuffer,function(err){if(err){console.log(err);return;}console.log('done');})})
}//dealWithBuffer(basePicture);
//添加文字水印
function addText(basePicture,font,newFilePath)
{const {fontSize,text,color,left,top}=font;const textToSvgSync=textToSvg.loadSync();const attributes={fill:color};const options={fontSize,anchor:'top',attributes};const svgTextBuffer=Buffer.from(textToSvgSync.getSVG(text,options));//添加文字sharp(basePicture).composite([{input:svgTextBuffer,top,left}]).withMetadata()		// 在输出图像中包含来自输入图像的所有元数据(EXIF、XMP、IPTC)。.toFormat('webp')	//生成新的图片格式为webp.toFile(newFilePath)  .then(info=>{if(!!info){console.log('水印已经生成');}}).catch(err=>{console.log(err);})
}/*
addText(basePicture,{fontSize:24,text:'喜气洋洋',color:'white',left:200,top:200
},`${__dirname}/img/6.webp`);
*///添加图片水印,水印图片一定要小于原图
function addWatermark(basePicture,watermarkPicture,newFilePath)
{sharp(basePicture)//.rotate(180) //旋转180度.composite([{input:watermarkPicture,blend:'overlay',globalAlpha:0.5,left:50,top:50  }])//在左上坐标(10,10)位置添加水印图片,composite为合成图片.withMetadata().webp({quality:90}).toFile(newFilePath).then(result=>{if(result){console.log('水印已经添加');}}).catch(err=>{console.log(err);})sharp.cache(false);
}//dealWithStream('./img/300.jfif');
let waterPic=`${__dirname}/img/water.png`
addWatermark(basePicture,waterPic,'./img/7.webp');
http://www.lryc.cn/news/492128.html

相关文章:

  • 力扣第 67 题 “二进制求和”
  • Spring Boot优雅读取配置信息 @EnableConfigurationProperties
  • 鸿蒙多线程开发——Sendable对象的序列化与冻结操作
  • nodepad配置c/c++ cmd快速打开创建项目文件
  • 【C++】读取数量不定的输入数据
  • ESC字符背后的故事(27 <> 033 | x1B ?)
  • 基于NXP LS1043 OpenWRT智能交通边缘网关设计
  • 绪论相关题目
  • 中国科学院大学研究生学术英语读写教程 Unit7 Materials Science TextA 原文和翻译
  • centos系列安装服务器时分区
  • vue的理解
  • 111. UE5 GAS RPG 实现角色技能和场景状态保存到存档
  • 抖音短视频矩阵源代码部署搭建流程
  • leetcode - LRU缓存
  • 计算机网络八股整理(一)
  • 了解 CSS position 属性
  • 数据结构 【二叉树(上)】
  • C++11(中)
  • 下拉选择器,选择框,支持单选、多选、筛选和清空功能,支持vue2和vue3
  • HTTP中GET和POST的区别是什么?
  • day04 企业级Linux安装及远程连接知识实践
  • jvm核心组件介绍
  • uname -m(machine) 命令用于显示当前系统的机器硬件架构(Unix Name)
  • Pgsql:json字段查询与更新
  • 类的加载机制
  • 基于vite创建的react18项目的单元测试
  • fiddler抓包工具与requests库构建自动化报告
  • Docker login 报证书存储错误的解决办法
  • 【自动化Selenium】Python 网页自动化测试脚本(上)
  • 什么是MyBatis?