javascript - 如何在 fabricjs 中将一个图像限制为另一个图像？

Question

我有一个带有透明中心的框架图像和一个将局部图像绘制到该框架后面的按钮(因此它看起来像框架)。如何将上传的图像限制在框架内？我试过使用没有透明周围区域的框架图像，但我最终想使用背景。

我正在使用不同尺寸的不同形状的框架。我怎样才能做到这一点？任何帮助将不胜感激。几天来我一直在修补这个问题。我将附上我的代码和图像以帮助更好地显示问题。提前致谢!

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

document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({
        scaleX: 0.8,
        scaleY: 0.8,
        left: 430,
        top: 65
      })
      canvas.add(oImg);
      canvas.setActiveObject(oImg);
      var image = canvas.getActiveObject();
      image.moveTo(-1);
      canvas.discardActiveObject();
      canvas.renderAll();
    });
  };
  reader.readAsDataURL(file);
});

fabric.Image.fromURL('https://i.imgur.com/OeXL2CJ.png', function(img) {
  var oImg = img.set({
    scaleX: 0.5,
    scaleY: 0.5,
    selectable: false
  })
  canvas.add(oImg).renderAll();
});

canvas {
  border: 1px solid #808080;
  border-radius: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="c" width="637" height="412"></canvas>

Answer 1

给你伙计。答案的精髓是一样的:

var pug = new fabric.Image(pugImg, {
        width: 500,
        height: 300,
        cropX: 0,
        cropY: 0,
        left: 10,
        top: 10
    });

但也许用 fiddle 会更全面。这是一只可爱的哈巴狗 ;-)

http://jsfiddle.net/sharksinn/5vyevd5y/

如果这能解决您的问题，请标记为正确答案:-)