Search code examples
watermarkgraphicsmagick

image in image (overlay image) with gm (GraphicsMagick)


I want to put a watermark picture (logo) on my resized pictures as you can see in the code below.

Can somebody help how to put a picture in the right low corner with a opacity of 50%?

var fs = require('fs')
  , gm = require('gm');

function walk(currentDirPath, callback) {
    var fs = require('fs'), path = require('path');
    fs.readdirSync(currentDirPath).forEach(function(name) {
        var filePath = path.join(currentDirPath, name);
        var stat = fs.statSync(filePath);
        if (stat.isFile()) {
            callback(filePath, stat);
        } else if (stat.isDirectory()) {
            walk(filePath, callback);
        }
    });
}


var inputDir = "/Users/USER/Desktop/src/"
var outputDir = "/Users/USER/Desktop/target/"
walk(inputDir, function(filePath, stat) {
    // match filename like IMG_1234.JPG
    var filename = filePath.match(/IMG_\d{4}.JPG/gmi).toString();
    console.log(filename);
    var outputfile = outputDir + filename

    var readStream = fs.createReadStream(filePath);
    gm(readStream, filename)
    .size({bufferStream: true}, function(err, size) {
      this.resize(size.width / 2, size.height / 2)
      this.write(outputfile, function (err) {
        if (!err) console.log('done');
      });
    });

});

Solution

  • Here is the solution:

    .draw(['image Over 0,0 0,0 /Users/USER/Desktop/target/nike-global-diversity-logo.png'])
    

    put this line of code after gm call and before the resizing.