Combine two gm objects while resizing one of them in graphicsMagick for NodeJS

Question

 var image = gm(someImageUrl)
 .resize(100,100);

 var drawings = gm(200,200,'red')
 .fill('blue')
 .drawRectangle(20,20,40,40);

 // Would be great to have sth like this. 
 drawings.drawImage(image, position)
 // or
 drawings.add(image, position)
 // or
 drawings.draw(image, position)

Append is not an option as I would like them to overlap and set precise position to the image

Answer 1

This is possible by resorting to composition options (i.e. the command() and in() functions on the object that gm() returns), which are essentially option flags that you would pass to the shell.

For example:

gm()
.command("composite") 
.in("-gravity", "center")
.in(change_image_url)
.in(base_image_url)
.write(out_file, function (e) {
  if (!e) {
    console.log('this worked');
  } else {
    console.log(err);
  }
});

However, the caveat is that streams and buffers can't take advantage of them, because the command-line options expect a raw file input. This may work in your case, if you wish to feed in URLs.

Try looking at node-canvas for actual drawing capabilities. You can add image objects, and then use createPngStream to create a stream that Graphics Magick can read, for any last-minute editing/anti-aliased resizing.