使用fabric js掩蓋兩張圖片

例如：我有一個彩色的形狀（心臟）。我有另一個圖像，我想掩蓋它的心臟，使新圖像只顯示爲心臟。我可以移動第二張上傳的圖片並調整大小以獲得該心臟中的所需區域。

這兩個圖像都是用戶上傳的圖像，而不是使用結構創建的那些矩形或方形中的一個，並像這裏的jsfiddle示例一樣拖動和調整圖像大小。

var canvas = new fabric.Canvas('myCanvas'); 

var clippingRect = new fabric.Rect({ 
    left: 0, 
    top: 0, 
    width: 100, 
    height: 100, 
    fill: 'transparent', 
    opacity: 1 
}); 
canvas.add(clippingRect); 

function handleImage(e) { 
    var reader = new FileReader(); 
    reader.onload = function (event) { 
     var img = new Image(); 
     img.onload = function() { 

      var instanceWidth, instanceHeight; 

      instanceWidth = img.width; 
      instanceHeight = img.height; 

      var imgInstance = new fabric.Image(img, { 
       width: instanceWidth, 
       height: instanceHeight, 
       top: (canvas.getHeight()/2 - instanceHeight/2), 
       left: (canvas.getWidth()/2 - instanceWidth/2), 
       originX: 'left', 
       originY: 'top' 
      }); 
      canvas.add(imgInstance); 
      imgInstance.clipTo = function (ctx) { 
    ctx.save(); 
    ctx.setTransform(1, 0, 0, 1, 0, 0); 
    ctx.rect(
    100, 100, 
    200, 200 
); 
    ctx.restore(); 
      }; 
      canvas.renderAll(); 
     }; 
     img.src = event.target.result; 
    }; 
    reader.readAsDataURL(e.target.files[0]); 
}

我需要的正是這一點，但有兩個自定義圖像（用戶上傳的圖片）。

來源

2016-02-01 nomi416

也許這個僞例子會給你指針如何添加一個路徑，而不僅僅是一個矩形的面具。

//adding main image and mask 
fabric.Image.fromURL(IMAGE_URL_HERE, function(pic) { 
    canvas.add(pic); 
    //positioning image, if needed 
    pic.centerH().setCoords(); 

    //adding path, may be a heart or any other in your case 
    var path = new fabric.Path('M1.398,84.129c3.305,20.461,9.73,50.635,13.591,67.385c2.354,10.212,12.549,23.734,18.51,30.02c4.923,5.191,27.513,23.343,38.34,27.589c18.604,7.295,33.984,4.187,46.012-8.306c12.028-12.493,25.595-34.78,27.954-43.994c2.587-10.105,5.065-26.842,4.313-37.243c-1.036-14.316-14.224-69.332-16.806-79.55c-4.48-17.735-26.246-48.821-80.609-37.668C-1.66,13.514-1.879,63.844,1.398,84.129z'); 

//positioning path, if needed 
path.set({ 
    originX: 'center', 
    originY: 'center', 
}); 

//masking img with path 
pic.set({ 
    clipTo: function(ctx) { 
    path.render(ctx); 
    } 
}); 

    canvas.renderAll(); 
});

完整的示例（用於略另一種情況，雖然）這裏：http://jsfiddle.net/mqL55m0f/2/

來源

2016-02-01 19:58:54 shershen

使用fabric js掩蓋兩張圖片

回答

相關問題