0

我正在尝试使用 fabric.js 将前景图像混合到背景图像中 前景图像应该在边缘模糊。

在下面的示例中，dog 是前景图像。风景是背景图像。

这是我的代码：

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

canvas.setBackgroundImage('https://cdn.pixabay.com/photo/2017/05/09/03/46/alberta-2297204__340.jpg', canvas.renderAll.bind(canvas));
 
fabric.Image.fromURL('https://cdn.pixabay.com/photo/2014/03/14/20/13/dog-287420__340.jpg', function(oImg) {
  canvas.add(oImg);

  canvas.item(0).set({        
	clipPath: new fabric.Circle({
        radius: 100, left:-90, top:-90
      })
  });
canvas.renderAll();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<canvas id="c" width="300" height="300" style="border:2px solid #000000"></canvas>

如何使狗图像融入背景图像（风景）？狗图像的边缘应模糊。

我想使用 html5 canvas fabric.js（不使用 css）来做到这一点。

谢谢

4

2 回答 2

0

您可以使用渐变填充在图像顶部覆盖一个矩形，而不是使用剪贴画。类似的东西（未测试）：

var rect = new fabric.Rect({
    top: 0,
    left: 0,
    width: /*same as the image*/,
    height: /*same as the image*/,
})

rect.setGradient('fill', {
  type: 'radial',
  colorStops: {
    0: 'rgba(255, 255, 0, 0)', 
    1: 'rgba(255, 255, 0, 0)'
    2: 'rgba(255, 255, 0, 1)'
  }
});
于 2020-04-23T23:15:01.513 回答
-1

实际上，您只需使用 css 就可以更轻松地完成所有这些工作：

.vignette-inset {
  position: relative;
  width: 300px;
  height: 300px;
  display: block;
  background-image: url('http://fabricjs.com/assets/pug_small.jpg');
  background-size: cover;
}

.vignette-inset:after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  box-shadow: inset 0px 0px 150px yellow;
}

/* removing shadow on hover
for demonstration purposes */
.vignette-inset:hover:after {
  box-shadow: none;
}
<div class='vignette-inset' />

于 2020-04-23T16:56:55.430 回答