Fabric.js 将图像混合到背景中。边缘模糊答案

【问题标题】：Fabric.js blend image into background. blur at the edgesFabric.js 将图像混合到背景中。边缘模糊
【发布时间】：2020-08-07 02:10:09
【问题描述】：

我正在尝试使用 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）来做到这一点。

谢谢

【问题讨论】：

标签： javascript html5-canvas fabricjs fabricjs2

【解决方案1】：

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

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

【讨论】：

也许用 fabric.Image.filters.GradientTransparency fabricjs.com/docs/…，或 blendImage 过滤器，但我从未使用过过滤器，所以我不能更精确

【解决方案2】：

您实际上可以使用 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;
}

&lt;div class='vignette-inset' /&gt;

【讨论】：

我希望以后能够下载图像。所以，我想用 html5 canvas fabric.js 来做。谢谢