暴力涂抹：Canvas + 原生JS实现终极图片涂抹效果

前言

现在火的一塌糊涂的AI生图功能，有时并不能生成一些我们满意的图片。

我们想对图片进行局部重绘，今天就来分享一下，然后在图片上进行涂抹，生成蒙版回传给AI

功能点

• 支持不规则和矩形选区，自适应
• 上一步，下一步
• 兼容所有框架
• 导出为黑色底白色内容的蒙版

效果

使用说明

新建实例

在图片加载完后初始化 canvas

<template>
  <div>
    <img ref="bgImg" class="img" id="bgImg" :src="imgSrc" />
  </div>
</template>

<script>
import { CanvasSelectArea } from 'xxxxxx'
  export default {
    mounted: {
      // 在图片加载完后初始化canvas
      this.$refs.bgImg.onload = () => {
        this.canvasSelectArea = new CanvasSelectArea({ imgId: 'bgImg' })
      }
    }
  }
</script>

切换模式

// 自由选取模式
this.canvasSelectArea.changeDrawModel('free')

// 矩形选取模式
this.canvasSelectArea.changeDrawModel('rectangle')

上一步，下一步

// 上一步
this.canvasSelectArea.undoLastDraw()

// 下一步
this.canvasSelectArea.redoNextDraw()

导出图片

// 是一个promise，需要等待结果返回
const img = await this.canvasSelectArea.extraction()

附上源码

记得点一个star哦

Github链接

END

• 希望这篇文章可以帮助到有需要的小伙伴们，有问题可以评论或私信我呀🤞🤞