node 圖片加水印

1單張圖片加水印

使用Node進行圖片水印添加,需要藉助一個Node中的庫: images

1 本地安裝images庫

npm install images -D
2 創建Img.js

var images = require('images');
var path = require('path');
var watermarkImg = images('water_logo.jpg');
var sourceImg = images('source.jpg');

// 比如放置在右下角,先獲取原圖的尺寸和水印圖片尺寸
var sWidth = sourceImg.width();
var sHeight = sourceImg.height();
var wmWidth = watermarkImg.width();
var wmHeight = watermarkImg.height();

images(sourceImg)
    // 設置繪製的座標位置,右下角距離 40px
    .draw(watermarkImg, sWidth - wmWidth - 40, sHeight - wmHeight - 40)
    // 保存格式會自動識別
    .save('saveimg.png');

3 執行 node img.js

4 結果顯示

2多張圖片加水印

多張圖片水印需要node中的imageinfo庫

1 本地安裝 imageinfo

npm install imageinfo -D
2 創建Img.js

//引用文件系統模塊
var fs = require("fs");
//引用imageinfo模塊
var imageInfo = require("imageinfo");
//引用images模塊
var images = require('images');
var watermarkImg = images('water_logo.jpg');

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.filename))
        });
        return imageList;
    }
};

//獲取文件夾下的所有圖片
var photos = getFiles.getImageFiles("./public/");
for (var i = 0; i < photos.length; i++) {
    var sourceImg = images('./public/'+photos[i]);
    var sourceImgName = photos[i];
    var sWidth = sourceImg.width();
    var sHeight = sourceImg.height();
    var wmWidth = watermarkImg.width();
    var wmHeight = watermarkImg.height();
    images(sourceImg)
        // 設置繪製的座標位置,右下角距離 40px
        .draw(watermarkImg, sWidth - wmWidth - 40, sHeight - wmHeight - 40)
        // 保存格式會自動識別
        .save('./saveImg/'+ sourceImgName+'');
}

3 執行 node imgs.js

4 效果

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章