Question

我有一个带有透明中心的帧图像和一个将本地图像绘制到该帧后面的按钮（因此它看起来像框架）。如何将上传的图像限制在框架中？我尝试使用没有透明周边区域的帧图像，但我最终还是喜欢使用背景。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果我理解正确，您只想在帧图像的中间区域显示第二张图像。您应该能够使用新的Fabrc 2测试版执行此操作。 Fabric 2为图像onbects引入了一些新参数：scaleX，scaleY，width，height，cropX，cropY ......

将两个图像的对象原点设置为居中/中间并调整第二个图像的宽度/高度和cropX / cropY应该可以解决问题。

以下是新功能的文档：

http://fabricjs.com/v2-breaking-changes#image

Answer 2

你在这里交配。答案的精髓是一样的：

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

但也许它更全面的小提琴。这是一个可爱的帕格; - ）

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

如果这可以解决您的问题，请标记为正确的答案： - ）

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

2 个答案: