Fabric.js如何按圖像剪輯

Question

標題說明了一切。 您可以看到Fabric.js蒙版過濾器演示 。 這應該很簡單，但是我找不到將蒙版應用於Fabric.js的任何示例。

我正在嘗試向我的JSFiddle應用蒙版。 http://jsfiddle.net/ZxYCP/342/

在我的JSFiddle中，我的目標是將logo和pugImg剪切到此圖片 （或任何圖片）中。 好吧，我什至無法掩蓋一張圖片，因此，如果這不打擾您，請更新JSFiddle以獲取更好的解釋。

另外，Fabric.js <3的創建者@kangax的代碼在此問題中應該是解決方案，但我無法正常工作。 結果應類似於下圖。 任何進一步的建議表示贊賞。

Answer 1

您不是真的嘗試遮罩圖像。 您正在使用一些合成效果。 有幾件要理解的與fabric.js不直接相關的事情。

蒙版覆蓋圖像。

您發布的演示鏈接不會使您獲得如屏幕截圖所示的效果。

在這種情況下，您應該具有：

• 淺藍色的帆布

• 一個pug.jpg圖像

• 白色overlay image其中有一個女孩形的透明孔

用這些3做一個三明治。在這種情況下，您要masking畫布而不是圖像。

如果您的路徑是女孩形的，則可以按照以下所示裁剪畫布：

Fabric.js將畫布（或對象組）剪輯為多邊形

但您聲明要使用圖像代替。 因此，如果您的疊加層沒有女孩形的孔，則可以使用另一種解決方案來獲得相同的效果：

• 透明的畫布

• 具有所需形狀和周圍透明像素的淺藍色圖像

• 一個pug.jpg圖像

在畫布上添加第一個圖像； 設定globalCompositeOperation的pug.jpg的為“源極-頂上”漆其它圖像比其他

 var canvas = new fabric.Canvas('c'); fabric.Image.fromURL('http://fabricjs.com/assets/2.svg', function(img){ img1 = img; fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img){ img1.scaleToWidth(canvas.getWidth()); img2 = img; img2.scaleToHeight(300); img2.left = 50; img2.top = 50; img2.globalCompositeOperation = 'source-atop'; canvas.add(img1); canvas.add(img2); }); }); 

 <script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>