Fabri c. js смешивает изображение с фоном. размытие по краям - PullRequest
Новая
       48

Fabri c. js смешивает изображение с фоном. размытие по краям

0 голосов
/ 23 апреля 2020

Я пытаюсь смешать изображение переднего плана с фоновым изображением, используя fabri c. 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 fabri c. js (без использования css).

Спасибо

Ответы [ 2 ]

0 голосов
/ 24 апреля 2020

вместо использования клипа можно наложить прямоугольник поверх изображения с градиентной заливкой. что-то подобное (не проверено): 

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 голосов
/ 23 апреля 2020

Вы можете сделать все это намного проще, просто 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' />
...