Fabric.js Custom clip

by duckywang1

HTML

<script src="https://cdn.bootcss.com/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.js"></script>
<!-- <script src="https://cdn.bootcss.com/fabric.js/1.7.22/fabric.js"></script> -->
<script src="https://cdn.bootcss.com/fabric.js/2.2.0/fabric.js"></script>
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<div class="canvasList">
	<div class="canvasItem" id="canvas-c">
		<canvas id="c" width="400" height="400"></canvas>
	</div>
	<div class="canvasItem" id="canvas-c1">
		<canvas id="c1" width="400" height="400"></canvas>
	</div>
</div>
<div>
  <button id="editmode">编辑模式</button>
  <button id="rendermode">普通渲染模式</button>
  <button id="previewClip">渲染裁剪区图片</button>
  <button id="downloadClip">下载裁剪图片</button>
</div>
<div>
  <img id="output" alt="output" />
</div>
<div style="display: none">
	<img...

CSS

* {
  margin: 0;
  padding: 0;
}
.canvasList {
	
}
.canvasItem {
	display: inline-block;
	vertical-align: top;
	margin: 0 0 0 -140px;
}
/* canvas { border: 1px solid #ccc; } */

JavaScript

let roratingIconSrc =...