Javascript 使用预定义模式从图像/画布中剪切背景

我并不要求对这个问题有一个完整的答案，只是一个如何解决的想法

假设我网站上的一个用户希望从该图像中剪切背景：

正常情况下，这将是一些神奇的轮廓工具的工作，但是这个网站已经提供了一个完美的裁剪模式，即：

正如你所看到的，这辆车比上面的那辆车更合适

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

我该怎么建造这样的东西呢？或者已经有软件做类似的事情了

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

---

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

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

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

（2） PNG（或GIF）

在Illustrator/Photoshop中创建纯色矩形

将汽车图像粘贴到其顶部作为新层

选择汽车的轮廓

从颜色矩形中删除所选内容。这将留下一个带有透明汽车形孔的矩形

将矩形另存为PNG或GIF格式或其他支持透明背景的格式

使用CSS将PNG覆盖在各种汽车图像上

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

现在，如果你想改变“背景”（这实际上是一个覆盖，而不是一个真正的背景），你只需要在一个地方改变它

---

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

以下是如何使用html5画布进行击倒

如果您有定义所需剪切的精确图像，并且您还知道要进行剪切的位置，则可以使用合成来进行剪切。使用合成中的

目标，新图形将仅在新旧像素不透明的情况下保留现有像素

这里有一些注释、示例代码和演示：

注:


仅车图像上的汽车尺寸不完全是背景图像上的汽车尺寸——仅车宽一点。这会使剪切部分有一些额外的像素。但是如果你有精确的尺寸，那么裁剪就完美了

仅车图像上的车具有半透明阴影。这会导致在阴影位于纯汽车图像上的位置，剪切部分有一些额外的半透明像素


使用不同大小的无阴影裁剪的示例和演示：



var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var bk=新图像（）；
bk.onload=启动；
bk.src=https://dl.dropboxusercontent.com/u/139992952/multple/model-t-car.png';
var cut=新图像（）；
cut.crossOrigin='anonymous'；
切割。空载=启动；
cut.src=”https://dl.dropboxusercontent.com/u/139992952/multple/model-t-cutout.png";
var imgcount=2；
函数start（）{
如果（--imgcount>0）{return；}
canvas.width=bk.width；
canvas.height=bk.height；
ctx.drawImage（bk，0,0）；
ctx.globalCompositeOperation='destination-in'；
ctx.drawImage（切割，125,40）；
//始终清理--重置默认合成模式
ctx.globalCompositeOperation='source-over'；
}
body{背景色：象牙；}
画布{边框：1px纯红；边距：0自动；}
带背景的原件
精确大小的切口


删除背景
SVG
是关键点2很聪明，但我想我需要一个透明的背景。不知怎么的，我忘了SVG。它是否与画布很协调？说实话，我不确定。您可以在画布上绘制svg并从那里执行一些合成操作，但仅从光栅图像执行合成操作要简单得多。svg在这里做得不好，无论如何你要做矢量化，它将是形状的近似值，更适合你拥有的：像素。看看@markE的例子，这真的很简单+它将保持半透明像素。