Question

fabric.Image.fromURL('https://thecrimsonsolutions.com/shopifyobjects.com/uploads/1533709331G4Play.png', function(img){
  img1 = img;
  fabric.Image.fromURL('https://thecrimsonsolutions.com/shopifyobjects.com//uploads/1535008793DfCfhT5-pc-wallpapers-hd.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);
  });
});

  var canvas = new fabric.Canvas('c', {
      width: $("#c").width(),
      height: $("#c").height()
  });



  var background;
  fabric.Image.fromURL('https://thecrimsonsolutions.com/shopifyobjects.com/uploads/1533709331G4Play.png', function (objects, options) {
      background = objects;
      background.set({
          left: 0,
          top: 0,
          scaleY: canvas.height / background.width,
          scaleX: canvas.width / background.width,
          selectable: false
      });
      
      canvas.add(background);
      canvas.renderAll();
  });

#c {

    height:400px;
    width:400px;
    background-repeat: no-repeat;
    border:2px solid;
   /*  background-image: url("https://thecrimsonsolutions.com/shopifyobjects.com/uploads/1534747034Moto%20X%20PLAY.jpg");*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>

在我的项目中，我需要定制手机套，杯子，T恤裁剪

这个想法是，用户上传他想用于其个性化产品的图像。例如，他想要一件上面印有很酷的设计报价的T恤。他应该能够移动，调整大小和旋转他选择的图像。当他对图像在T恤衫上的位置感到满意并按OK时，应在该T恤衫模板中裁剪设计。所以我需要的是：

使画布出现在产品模板的形状中，可能是剪贴蒙版之类的东西。
在上传的图片上方显示该图片，并提供移动，调整大小和旋转的选项。最好在该模板上显示图像末端边缘，甚至可能显示整个图片，但在模板外部具有不同的不透明度。
单击按钮可在模板内裁剪图像。

几天前我发现了关于fabric.js的内容，所以我是一个初学者，希望对此有所帮助。

我已经附上我尝试过的代码。

谢谢。

Answer 1

下面的代码可能会有所帮助。

var canvas = new fabric.Canvas('c', {
  width: $("#c").width(),
  height: $("#c").height()
});

var imageUrl = 'https://thecrimsonsolutions.com/shopifyobjects.com//uploads/1535008793DfCfhT5-pc-wallpapers-hd.jpg';
var overLayImage = 'https://thecrimsonsolutions.com/shopifyobjects.com/uploads/1533709331G4Play.png';

/* Add your mobile image as overlay to the canvas */
canvas.setOverlayImage(overLayImage, canvas.renderAll.bind(canvas));

/* Add your user image */
fabric.Image.fromURL(imageUrl, function(img){
  img.scaleToWidth(canvas.getWidth());
  canvas.add(img);
});

#c {
  height:400px;
  width:460px;
  background-repeat: no-repeat;
  border:2px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>

刚刚将移动图像添加为画布的叠加层，而用户上传的图像则作为可拖动/可调整大小的图像添加了。

您也可以在Codepen上查看代码。

以外部裁剪蒙版的形状裁剪图像-fabric.js

1 个答案: