一个偏门儿的基于canvas的小应用,供同好自娱自乐之。
npm install
or
yarn install
npm start
or
yarn start
127.0.0.1:3300 或 localhost:3300
<script src='/lib/FastFill.js'></script>
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,
// ...
})
监听资源加载方法
唯一参数 callback 是图片加载完成并渲染到画布的回调,有唯一参数,该参数有唯一属性msg
FF.loaded(() => {
console.log('资源加载完毕')
})
填色功能开启方法
FF.turnOn()
关闭并注销填色事件,可以用turnOn方法重新开启填色
FF.turnOff()
填色开始 唯一参数 callback 是填色开始的回调
FF.fillStart(() => {
console.log('START', '填色开始')
})
填色完成的方法
参数1 success 是填充完成的回调
参数2 error 为填充时异常回调,有唯一参数,该参数有唯一属性msg
FF.fillDone(() => {
console.log('END', `填充完成`)
}, err => {
console.log(err.msg)
})
覆盖配置项
唯一参数 options 配置项
FF.reset({
imageURl: '',
})
重置画布与当前的图片
FF.resetCanvas()
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并不能完美执行
链接:https://developers.weixin.qq.com/s/OAO4vmmf7Qp5
如果链接失效可以在example/miniprogram文件夹中查看
个人觉得目前在小程序中使用canvas的最优解依然是利用web-view加载h5的模式
图片资源同源问题
MIT