首頁 > web前端 > js教程 > 主體

Node專案中用images+imageinfo庫為圖片批量添加浮水印

青灯夜游
發布: 2022-02-16 20:12:23
轉載
2878 人瀏覽過

Nodejs中怎麼給圖片批量添加浮水印?以下這篇文章跟大家介紹一下Node專案中用images imageinfo庫給圖片批量添加浮水印的方法,希望對大家有幫助!

Node專案中用images+imageinfo庫為圖片批量添加浮水印

Nodejs為圖片批次新增浮水印

環境準備

安裝images 函式庫

npm install images
登入後複製

安裝imageinfo 函式庫

npm install imageinfo
登入後複製

實作

#本例addimageinfo.js 與marklogo.png 、imagest資料夾、node_modules 資料夾在同一目錄下。

含子檔案也可實現

JS程式碼

#若直接使用需修改一下資訊

var logomarkimg = images('./marklogo.png');//水印位置
var rmimgpath = "./imagest/img/";//添加图片文件加位置
var mark = "logo_";//另存图片前缀,若为""则替换原图片
登入後複製

完整程式碼addimageinfo. js

//引用文件系统模块
var fs = require("fs");
//引用imageinfo模块
var imageInfo = require("imageinfo");
//引用images模块
var images = require('images');

var logomarkimg = images('./marklogo.png');//水印位置
var rmimgpath = "./imagest/img/";//添加图片文件加位置
var mark = "logo_";//另存图片前缀,若为""则替换原图片

function readFileList(path, filesList) {
    var files = fs.readdirSync(path);
    files.forEach(function (itm, index) {
        var stat = fs.statSync(path + itm);
        if (stat.isDirectory()) {
            //递归读取文件
            readFileList(path + itm + "/", filesList)
        } else {
            var obj = {};//定义一个对象存放文件的路径和名字
            obj.path = path;//路径
            obj.filename = itm//名字
            filesList.push(obj);
        }
    })
}
var getFiles = {

    //获取文件夹下的所有文件
    getFileList: function (path) {
        var filesList = [];
        readFileList(path, filesList);
        return filesList;
    },
    //获取文件夹下的所有图片
    getImageFiles: function (path) {
        var imageList = [];
        this.getFileList(path).forEach((item) => {
            var ms = imageInfo(fs.readFileSync(item.path + item.filename));
            ms.mimeType && (imageList.push(item))
        });
        return imageList;
    }
};
//获取文件夹下的所有图片
var photos = getFiles.getImageFiles(rmimgpath);
for (var i = 0; i < photos.length; i++) {
    var sourceImgpath = photos[i].path;
    var sourceImgname = photos[i].filename;
    var sourceImg = images(sourceImgpath + sourceImgname);
    var sWidth = sourceImg.width();
    var sHeight = sourceImg.height();
    var wmWidth = logomarkimg.width();
    var wmHeight = logomarkimg.height();

    images(sourceImg)
        // 设置绘制的坐标位置,右下角距离 10px
        .draw(logomarkimg, sWidth - wmWidth - 10, sHeight - wmHeight - 10)
        // 保存格式会自动识别
        .save(sourceImgpath + mark + sourceImgname + '');
}
登入後複製

運行

在目錄下,執行node指令

node ./addimageinfo.js
登入後複製

以查看效果

Node專案中用images+imageinfo庫為圖片批量添加浮水印
Node專案中用images+imageinfo庫為圖片批量添加浮水印
Node專案中用images+imageinfo庫為圖片批量添加浮水印

#更多node相關知識,請造訪:nodejs 教學

以上是Node專案中用images+imageinfo庫為圖片批量添加浮水印的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!