Skip to content

Instantly share code, notes, and snippets.

@romuloctba
Created September 1, 2016 16:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save romuloctba/6fca13f9c4227ac08aa41b2622733f0b to your computer and use it in GitHub Desktop.
Save romuloctba/6fca13f9c4227ac08aa41b2622733f0b to your computer and use it in GitHub Desktop.
Using Canvas with NodeJS to create a composite of images
var fs = require('fs');
var path = require('path');
var Canvas = require('canvas');
var Image = Canvas.Image;
var img = new Image();
var mask = new Image();
img.onload = function () {
var w = img.width;
var h = img.height;
var canvas = new Canvas(w, h);
var ctx = canvas.getContext('2d');
ctx.drawImage(mask, 0, 0,w,h);
ctx.globalCompositeOperation = "source-in";
ctx.drawImage(img, 0, 0);
var out = fs.createWriteStream(path.join(__dirname, 'composite.png'));
var stream = canvas.createPNGStream({
bufsize: 2048,
quality: 80
});
stream.pipe(out);
};
mask.src = path.join(__dirname, 'composite_mask.png');
img.src = path.join(__dirname, '49ers.jpg');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment