文章/答案/技术大牛

发布

社区首页 >问答首页 >Fabric.js混合图像到背景中。边缘模糊

问Fabric.js混合图像到背景中。边缘模糊
EN

Stack Overflow用户

提问于 2020-04-24 00:42:52

回答 2查看 444关注 0票数 0

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

在下面的示例中，狗是前景图像。场景是背景图像。

这是我的代码：

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)来做这件事。

谢谢

html5-canvas

fabricjs

fabricjs2

javascript

回答 2

Stack Overflow用户

发布于 2020-04-24 07:15:02

代替使用clipath，您可以在图像顶部覆盖一个矩形，并使用渐变填充。类似这样的东西(未经过测试)：

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

票数 0

Stack Overflow用户

发布于 2020-04-24 00:56:55

实际上，只需使用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' />

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61392510

复制

相似问题

问Fabric.js混合图像到背景中。边缘模糊
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fabric.js混合图像到背景中。边缘模糊EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fabric.js混合图像到背景中。边缘模糊
EN