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 pletely 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).

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 pletely 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).

• javascript
• canvas
• html5-canvas

• 1 SVG <clippath> is the key sarasoueidan./blog/css-svg-clipping – Radu Chiriac Commented Jan 24, 2016 at 14:55

2 Answers 2

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 positing to do you cut-out. With destination-in positing, 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./u/139992952/multple/model-t-car.png';
var cut=new Image();
cut.crossOrigin='anonymous';
cut.onload=start;
cut.src="https://dl.dropboxusercontent./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 positing 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./u/139992952/multple/model-t-car.png'>
<h4>Exactly sized cutout</h4>
<img src='https://dl.dropboxusercontent./u/139992952/multple/model-t-cutout.png'>
<br>
<h4>With background removed</h4>
<canvas id="canvas" width=300 height=300></canvas>

There's no easy plug-and-play way. I can think of 2 methods:

(1) SVGs. Plot the different points on the outline of the car yourself (very time-consuming), or import the car into Illustrator (or similar), export it as an SVG, and use the points it calculated for you with clip-path.

(2) PNG (or GIF).

1. Create a rectangle of solid color in Illustrator/Photoshop.
2. Paste the car image on top of it as a new layer.
3. Select the outline of the car.
4. Delete the selection from the rectangle of color. This will leave a rectangle with a transparent car-shaped hole in it.
5. Save the rectangle as a PNG or GIF or other format supporting transparent backgrounds.
6. Use CSS to overlay that PNG on various images of cars.

This is useful if, for instance, you have 5 photos of cars in different colors, all with the same dimensions and taken from the same angle, and want to display the 5 cars with the same background. No need to copy the same background 5 times in Photoshop; just re-use the PNG 5 times in CSS.

Now if you want to change the "background" (which is actually an overlay and not really a background) you need only change it in one place.

Keep in mind: The image you provided is not a perfect outline because it has a shadow.