sunzi-plugin-clip

// init const clip = new Clip(canvas: HTMLCanvasElement, image: HTMLImageElement, { debug: boolean; removeOffset: number; // 移除范围 hitOffset: number; // 命中范围 lineWidth: number; // 线段宽度 lineColor: string; // 线段颜色 closedLineWidth: number; // 闭合线段宽度 closedLineColor: string; // 闭合线段颜色 endpointRadius: number; // 端点半径 endpointColor: string; // 端点颜色 });

Usage no npm install needed!

<script type="module">
  import sunziPluginClip from 'https://cdn.skypack.dev/sunzi-plugin-clip';
</script>

README

sunzi-plugin-clip

Usage

// init
const clip = new Clip(canvas: HTMLCanvasElement, image: HTMLImageElement, {
  debug: boolean;
  removeOffset: number; // 移除范围
  hitOffset: number; // 命中范围
  lineWidth: number; // 线段宽度
  lineColor: string; // 线段颜色
  closedLineWidth: number; // 闭合线段宽度
  closedLineColor: string; // 闭合线段颜色
  endpointRadius: number; // 端点半径
  endpointColor: string; // 端点颜色
});

// 切换模式 (划线和移动)
clip.modeToggle();

// 撤销
clip.revoke();

// 放大图片
clip.zoomIn(scale: number = 1.1);

// 缩小图片
clip.zoomOut(scale: number = 0.9);

// 生成图片
clip.generate() : Promise<String>

// 清空
clip.clear();