一个偏门儿的基于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