Mr-xue / canvas-eraser

基于Canvas/WebGL+Vue3/Vite实现的抠图编辑器demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

抠图编辑器demo

参考稿定设计智能抠图的擦补画笔实现的抠图编辑器demo,主要实现了擦除画笔和修补画笔,此外也包含图像拖动、缩放、保存等功能。

操作说明

这里是demo地址,下面说明一下主要的功能。

  • 修补画笔: 如下图所示,当选择完图片后,选择修补画笔(默认画笔类型),在左侧操作画布上按下鼠标左键进行绘制(滑动),就可以将绘制出的区域部分的图像修补到右侧结果画布上,所以修补画笔的实际效果就是抠图,并且左侧操作画布上的修补区域会有一层蒙版效果以显示已修补(抠出)的区域。 修补画笔
  • 擦除画笔: 效果和修补画笔正好相反,可以对已修补部分的图像进行擦除。 擦除画笔
  • 画笔尺寸: 单位为px,默认为50px,但是受缩放比例值影响,比如缩放比例为50%,那么实际的画笔尺寸为25px。
  • 画笔硬度: 相当于给修补/擦除画笔绘制的圆点区域的边缘添加一个羽化效果,而画笔硬度相当于羽化半径,硬度越小则羽化半径越大,反之则越小。
  • 保存: 基于图像原始尺寸进行抠图操作并生成结果图像,图像越大保存过程越长。 保存

其他说明

  • 缩放功能: 滚动鼠标滚轮可以对两侧图像进行实时缩放,且缩放是以当前鼠标指针位置为中心进行的。
  • 拖动功能: 在右侧结果画布上按下鼠标左键进行滑动可以对两侧图像进行拖动。
  • 缩放/拖动限制: 缩放的范围为15%-1000%,拖动没有范围限制。

About

基于Canvas/WebGL+Vue3/Vite实现的抠图编辑器demo

License:MIT License


Languages

Language:TypeScript 92.9%Language:Vue 5.7%Language:JavaScript 1.1%Language:HTML 0.3%