Маска двух изображений с использованием ткани js

Question

Можно ли замаскировать два изображения, используя ткань js?

Например: у меня цветная форма (сердце). У меня есть другие изображения, и я хочу замаскировать его над сердцем, чтобы этот новый образ отображался только как сердце. Я могу перемещать второе загруженное изображение и изменять его размер, чтобы получить желаемую область в этом сердце.

Оба изображения представляют собой загруженные пользователем изображения, а не один из этих прямоугольников или квадратов, которые создаются с использованием ткани, а также перетаскивают и изменяют размер изображения, как в примере jsfiddle.

http://jsfiddle.net/Jagi/efmbrm4v/1/

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]); 
} 

мне нужно именно это, но с двумя пользовательскими изображениями (пользователь загрузил изображения).

Answer 1

Возможно, этот псевдо пример даст вам указатель, как добавить маску с контуром, а не только прямоугольник.

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