Cutting out background from image/canvas using a predefined pattern

Question

I'm not requiring a full answer to this question, just an idea on how to approach it.

Let's say that a user on my site wants to cut out the background from this image:

Normally this would be a job for some magic outline tool, but this site already carries something that would provide a perfect cutout pattern, namely this:

As you can see this car will fit perfectly over the top one.

If the user could somehow fit the bottom picture over the top one and cut out everything outside that, it would be a perfect background removal.

How do I go about building something like this? Or are there already software out that does something similar?

The bottom picture could be anything, for examle a completely black model for easier recognition, but I'd think that it would be smarter if it used the outline of the transparent .png image and cut out everything outside it.

(The picture itself doesn't need to be used either if there is some way to extract the important bits of it needed for the cutout, of course).

Answer 1

Here's how to do your knockout with html5 canvas

If you have an exact image that defines the desired cut and you also know the position where the cut is to be made, then you can use compositing to do you cut-out. With destination-in compositing, new drawings will keep existing pixels only where new & old pixels are non-transparent.

Here's a few notes, example code and a Demo:

Notes:

• Your car on your car-only image is not exactly the size of the car on the car+background image -- the car-only is a bit wider. This causes the cut-out to have some extra pixels. But if you had exact sizing the cutout would be perfect.

• Your car on your car-only image has semi-transparent shadowing. This causes the cutout to have some extra semi-transparent pixels where the shadow was on the car-only image.

Example & demo using a different exactly sized cutout with no shadow:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var bk=new Image();
bk.onload=start;
bk.src='https://dl.dropboxusercontent.com/u/139992952/multple/model-t-car.png';
var cut=new Image();
cut.crossOrigin='anonymous';
cut.onload=start;
cut.src="https://dl.dropboxusercontent.com/u/139992952/multple/model-t-cutout.png";
var imgcount=2;
function start(){
  if(--imgcount>0){return;}
  canvas.width=bk.width;
  canvas.height=bk.height;
  ctx.drawImage(bk,0,0);
  ctx.globalCompositeOperation='destination-in';
  ctx.drawImage(cut,125,40);
  // always clean up -- reset the default compositing mode
  ctx.globalCompositeOperation='source-over';
}

body{ background-color: ivory; }
canvas{border:1px solid red; margin:0 auto; }

<h4>Original with background</h4>
<img src='https://dl.dropboxusercontent.com/u/139992952/multple/model-t-car.png'>
<h4>Exactly sized cutout</h4>
<img src='https://dl.dropboxusercontent.com/u/139992952/multple/model-t-cutout.png'>
<br>
<h4>With background removed</h4>
<canvas id="canvas" width=300 height=300></canvas>