canvas 任意图片填充颜色——油漆桶效果

一个填色小demo，支持多实例 github.com/applelee/fa…

1. 安装依赖

npm install

or

yarn install

2. 启动本地服务

npm start

or

yarn start

3. 浏览器访问下面地址

127.0.0.1:3300 或 localhost:3300

引入FastFill

引用

<script src='/lib/FastFill.js'></script>

FastFill API

创建实例 instance

new FastFill(options)

var FF = new FastFill({
  elementId: 'canvas',
  imageURL: '/example/timg-small.jpg',
  fillColor: [170, 0, 0, 255],
  tolerance: 120,
  // ...
})

FastFill.create(options)

var FF = FastFill.create({
  elementId: 'canvas',
  imageURL: '/example/timg-small.jpg',
  fillColor: [170, 0, 0, 255],
  tolerance: 120,
  // ...
})

实例的方法 method

instance.loaded void

监听资源加载方法
唯一参数 callback 是图片加载完成并渲染到画布的回调，有唯一参数，该参数有唯一属性msg

FF.loaded(() => {
  console.log('资源加载完毕')
})

instance.turnOn void

填色功能开启方法

FF.turnOn()

instance.turnOff void

关闭并注销填色事件，可以用turnOn方法重新开启填色

FF.turnOff()

instance.fillStart void

填色开始 唯一参数 callback 是填色开始的回调

FF.fillStart(() => {
  console.log('START', '填色开始')
}) 

instance.fillDone void

填色完成的方法
参数1 success 是填充完成的回调
参数2 error 为填充时异常回调，有唯一参数，该参数有唯一属性msg

FF.fillDone(() => {
  console.log('END', `填充完成`)
}, err => {
  console.log(err.msg)
})

instance.reset void

覆盖配置项
唯一参数 options 配置项

FF.reset({
  imageURl: '',
})

instance.resetCanvas void

重置画布与当前的图片

FF.resetCanvas()

options配置及初始值

opstions = {
  // canvas父级id（必填）
  elementId: '',
  // 图片地址（必填）
  imageURL: '',
  // 画布尺寸
  canvasSize: [600, 800],
  // 填充色
  // 切换填充色需要重新设置
  fillColor: [100, 100, 100, 255],
  // 被填充色
  // 默认值为白色
  coverFillColor: [255, 255, 255, 255],
  // 禁止填充色
  // 默认值为例子中的黑线色
  boundaryColor: [0, 0, 0, 255],
  // 颜色匹配容差值 1-200
  tolerance: 100,
  // 是否禁止填充边界色
  // boundaryColor颜色是否能被填充
  isBanBoundaryColor: true,
  // 每次填充是否自动替换被填充色
  // 如果为false需要手动更新coverFillColor
  isAutoChangeCoverFillColor: true,
}

小程序例子（代码片段，提供开发思路）

注意在手机端调试的时候，由于微信官方Image对象存在bug并不能完美执行
链接：developers.weixin.qq.com/s/OAO4vmmf7…
如果链接失效可以在example/miniprogram文件夹中查看
个人觉得目前在小程序中使用canvas的最优解依然是利用web-view加载h5的模式

源码：github.com/applelee/fa…