如何在图像裁剪的中心创建一个白色区域，其余的protion为透明

Question

我正在尝试在中心创建白色区域部分，如下图所示 我使用了叠加技术，但这失败了 我也尝试过使用clip-path。

此示例可在shutterstock找到 我实际上是想重新创建那部分。

($)(function() {

  var canvas = new fabric.Canvas('editor-canvas');
  $(window).resize(function() {
    canvas.setHeight(window.innerHeight);
    canvas.setWidth(window.innerWidth);
  });
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 470,
    height: 120
  });
  canvas.calcOffset();
  canvas.setHeight(window.innerHeight);
  canvas.setWidth(window.innerWidth);
  canvas.renderAll();
  canvas.globalAlpha = 0.5;
  canvas.add(rect);
});

.editor-canvas-container {
  width: 100%;
  height: 100%;
  position: relative;
  left: 55px;
}

.editor-canvas-container .editor-canvas-wrapper {
  width: 100%;
  height: 100%;
  z-index: -2;
  background: #1e1e1f;
}

.editor-canvas-container .editor-canvas-wrapper .canvas-container {
  margin: 0 auto;
}

.editor-canvas-container .editor-canvas-wrapper #editor-canvas {
  width: 500px;
  height: 300px;
  background: white;
}

.editor-footer>div {
  display: flex;
  align-items: center;
  border: 1px #ddd;
  flex: 1;
}

.editor-footer .editor-footer-left-wraper {
  flex: 1;
  display: -webkit-box;
  padding: 0px 15px;
}

.editor-footer .editor-footer-left-wraper>div {
  color: white;
  display: -webkit-box;
  padding: 0px 10px;
}

.editor-body-container {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>

<section class="editor-canvas-container">
  <div class="editor-canvas-wrapper">
    <canvas id="editor-canvas" class="inset"></canvas>
  </div>
</section>

Answer 1

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'black';
canvas.setBackgroundImage(new fabric.Rect({
 left: canvas.width/2,
 top: canvas.height/2,
 fill: 'white',
 width: canvas.width*2/3,
 height: canvas.height*2/3,
 originX:'center',
 originY:'center',
}))
canvas.renderAll();

canvas {
 border: blue dotted 2px;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>

您可以使用Rect将setBackgroundImage对象设置为背景。