使用预定义的图案从图像/画布中切出背景

Question

我不需要这个问题的完整答案，而只是关于如何解决它的想法。

假设我网站上的用户想要从这张图片上剪掉背景：

通常，对于某些魔术轮廓工具来说，这是一项工作，但是此站点已经提供了可以提供完美切口模式的内容，即：

如您所见，这辆车将完全适合前一辆。

如果用户可以以某种方式使底部图片适合顶部图片，并剪裁掉外面的所有内容，那将是一个完美的背景去除方法。

我该如何构建这样的东西？还是已经有类似软件的软件了？

底部图片可以是任何东西，例如可以使用全黑模型以便于识别，但是如果使用透明.png图像的轮廓并将其外部的所有内容都切掉，它将更聪明。

（当然，如果有某种方法可以提取抠图所需要的重要部分，也不需要使用图片本身）。

Answer 1

这是使用html5 canvas进行剔除的方法

如果您拥有定义所需剪切的精确图像，并且还知道要剪切的位置，则可以使用合成进行剪切。通过destination-in合成，新工程图将仅在新像素和旧像素不透明的情况下保留现有像素。

以下是一些注释，示例代码和演示：

笔记：

• “仅汽车”图像上的汽车与“汽车” +“背景”图像上的汽车尺寸不完全相同，“仅汽车”的宽度稍宽。这会导致切口有一些额外的像素。但是，如果您具有正确的大小，则切口将是完美的。

• 仅汽车图像上的汽车具有半透明阴影。这会导致切口在阴影位于仅汽车图像上时具有一些额外的半透明像素。

示例和演示使用另一个没有阴影的精确尺寸的切口：

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>