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

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.kler.cn/a/411378.html

相关文章:

  • IDEA无法创建java8、11项目创建出的pom.xml为空
  • GitLab|应用部署
  • UE5肉鸽游戏教程学习
  • LLC与反激电路设计【学习笔记】
  • Vue 3 动态组件教程
  • 近源渗透|HID ATTACK从0到1
  • 第二十二课 Vue中的组件切换
  • C#中面试的常见问题007
  • redis工程实战介绍(含面试题)
  • 【es6】原生js在页面上画矩形层级等问题的优化(二)
  • C# 程序来计算三角形的面积(Program to find area of a triangle)
  • 数据结构 (11)串的基本概念
  • 异或-java-leetcode
  • 从攻击视角探讨ChatGPT对网络安全的影响
  • c++编程玩转物联网:使用芯片控制8个LED实现流水灯技术分享
  • C++:哈希-->unordered_map/unordered_set
  • POA-CNN-SVM鹈鹕算法优化卷积神经网络结合支持向量机多特征分类预测
  • 2039:【例5.6】冒泡排序
  • Dubbo的RPC泛化调用
  • apache、iis规则设置防盗链
  • 实现 Browser 客户端下载 XML 文件功能
  • 基于NXP LS1043 OpenWRT智能交通边缘网关设计
  • Elasticsearch对于大数据量(上亿量级)的聚合如何实现?
  • mcu 测试
  • 001.python 脚本编程
  • 第R4周:LSTM-火灾温度预测(TensorFlow版)