Question

我不需要对这个问题给出完整的答案，只是对如何处理它的想法。

让我们说我网站上的用户想要从这张图片中剪切背景：

通常情况下，这将是一个魔术轮廓工具的工作，但是这个网站已经带有一些可以提供完美剪切图案的东西，即：

正如你所看到的，这辆车完全适合顶级车。

如果用户能够以某种方式将底部图片放在顶部图片上并剪掉除此之外的所有内容，那将是完美的背景删除。

我该如何构建这样的东西？或者是否已经出现类似的软件？

底部图片可以是任何东西，例如，一个完全黑色的模型，以便于识别，但我认为如果它使用透明.png图像的轮廓并切除其外部的一切将更聪明。

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

Answer 1

以下是如何使用html5画布进行淘汰赛

如果您有一个精确图像定义了所需的剪切，并且您也知道剪切的位置，那么您可以使用合成来剪切。通过destination-in合成，新图纸只会将现有像素保留在新的＆amp;旧像素是不透明的。

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

注意：

您的汽车上的汽车图像不完全汽车上的汽车大小+背景图像 - 汽车只有更宽一点。这会导致切口有一些额外的像素。但如果你有完全大小，那么剪切就会很完美。
您车上的汽车图像有半透明阴影。这会导致切口有一些额外的半透明像素，阴影位于仅限汽车的图像上。

示例＆amp;演示使用不同的精确大小的剪切，没有阴影：

＆＃13;

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';
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

没有简单的即插即用方式。我可以想到两种方法：

（1）SVG。自己绘制汽车轮廓上的不同点（非常耗时），或将汽车导入Illustrator（或类似），将其导出为SVG，并使用clip-path为您计算的点数。

（2）PNG（或GIF）。

在Illustrator / Photoshop中创建纯色矩形。
将汽车图像粘贴在其上作为新图层。
选择汽车的轮廓。
从颜色矩形中删除选区。这将留下一个带有透明车形孔的矩形。
将矩形保存为PNG或GIF或其他支持透明背景的格式。
使用CSS将PNG叠加在汽车的各种图像上。

例如，如果您有5张不同颜色的汽车照片，这些照片都具有相同的尺寸并从相同的角度拍摄，并希望显示具有相同背景的5辆汽车，则此功能很有用。无需在Photoshop中复制相同的背景5次;只需在CSS中重复使用PNG 5次。

现在，如果你想改变＆＃34;背景＆＃34; （这实际上是一个叠加而不是真正的背景）你只需要在一个地方改变它。

请记住：您提供的图片不是一个完美的轮廓，因为它有阴影。

Answer 3

您可以使用Cloudinary自动执行此操作。有一个补充，这对你来说就是这样。在博客上，您可以阅读有关从照片中删除背景的更多信息：http://cloudinary.com/blog/how_to_automatically_and_professionally_remove_photo_backgrounds

*披露：我在那里工作： - ）

使用预定义模式

3 个答案: