使用預定義模式從圖像/畫布切除背景

Question

我不需要對此問題的完整答案，只是一個關於如何接近它的想法。

比方說，在我的網站用戶想要切斷從這個圖片的背景：

通常情況下，這將是一段神奇的輪廓工具工作，但這個網站已經攜帶的東西這將提供一個完美的剪切模式，即這樣的：

正如你可以看到這款車將適合perfe在最上面的一個。

如果用戶可以以某種方式將底部圖片放在頂部圖片上並將其切除，那麼這將是一個完美的背景刪除。

我該如何去建造這樣的東西？還是已經有軟件可以做類似的事情？

底部圖片可能是任何東西，檢查一個完全黑色的模型更容易識別，但我認爲它會更聰明，如果它使用透明PNG圖像的輪廓，並刪除它的一切。 （如果有某種方法可以提取切割所需的重要位數，那麼圖片本身不需要使用）。

Answer 1

下面是如何使用HTML5畫布

如果你做你的淘汰賽有一個確切圖像，它定義了所需的切割，並且您還知道切割的位置，然後您可以使用合成來切割。通過合成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>

Answer 2

沒有簡單的即插即用方式。我可以想到2種方法：

（1）SVGs。繪製汽車輪廓上的不同點（非常耗時），或將汽車導入Illustrator（或類似），將其導出爲SVG，然後使用它爲您計算的點與clip-path。

（2）PNG（或GIF）。

1. 在Illustrator/Photoshop中創建一個純色矩形。
2. 將汽車圖像粘貼在新圖層上。
3. 選擇汽車輪廓。
4. 從顏色的矩形中刪除選區。這將留下一個長方形，其中有一個透明的汽車形洞。
5. 將矩形保存爲PNG或GIF或其他支持透明背景的格式。
6. 使用CSS在汽車的各種圖像上疊加該PNG。

這很有用，例如，如果您有5張不同顏色的汽車照片，所有尺寸相同且角度相同且想要顯示具有相同背景的5輛汽車。無需在Photoshop中複製相同的背景5次;只需在CSS中重複使用5次PNG即可。

現在，如果你想改變「背景」（實際上是一個覆蓋層，而不是真正的背景），你只需要在一個地方改變它。

記住：您提供的圖片是不是一個完美勾勒，因爲它有一個陰影。

Answer 3

您可以使用Cloudinary自動執行此操作。有一個補充，這完全是你的。在博客上，你可以閱讀更多有關從照片去除背景：http://cloudinary.com/blog/how_to_automatically_and_professionally_remove_photo_backgrounds

*披露：我在那裏工作:-)