Warehouse Address:Github.com/applelee/fa…

The last screenshot

A little demo of colouring in,Support for multiple instances Github.com/applelee/fa…

1. Install dependencies

npm install
Copy the code

or

yarn install
Copy the code

2. Start the local service

npm start
Copy the code

or

yarn start
Copy the code

3. Access the following address

127.0.0.1:3300 or localhost: 3300

The introduction of FastFill

reference

<script src='/lib/FastFill.js'></script>
Copy the code

FastFill API

Creating an instance instance

new FastFill(options)

var FF = new FastFill({
  elementId: 'canvas'.imageURL: '/example/timg-small.jpg'.fillColor: [170.0.0.255].tolerance: 120.// ...
})
Copy the code

FastFill.create(options)

var FF = FastFill.create({
  elementId: 'canvas'.imageURL: '/example/timg-small.jpg'.fillColor: [170.0.0.255].tolerance: 120.// ...
})
Copy the code

Instance method method

instance.loaded void

Callback is a callback after the image has been loaded and rendered to the canvas. This parameter has a unique attribute MSG

FF.loaded(() = > {
  console.log('Resource loaded complete')})Copy the code

instance.turnOn void

Method for enabling the color filling function

FF.turnOn()
Copy the code

instance.turnOff void

Turn off and cancel the colorization event. You can turnOn the colorization again using the turnOn method

FF.turnOff()
Copy the code

instance.fillStart void

The only argument to colorstart callback is the colorstart callback

FF.fillStart(() = > {
  console.log('START'.'Start filling in')})Copy the code

instance.fillDone void

Method parameter 1 success is the callback parameter after filling. 2 Error is the exception callback during filling. It has a unique parameter and a unique attribute MSG

FF.fillDone(() = > {
  console.log('END'.'Fill done')},err= > {
  console.log(err.msg)
})
Copy the code

instance.reset void

Overrides the unique configuration item parameter options

FF.reset({
  imageURl: ' ',})Copy the code

instance.resetCanvas void

Reset canvas with current picture

FF.resetCanvas()
Copy the code

Options Configuration and initial value

opstions = {
  // Canvas parent ID (required)
  elementId: ' '.// Image address (required)
  imageURL: ' '.// Canvas size
  canvasSize: [600.800]./ / fill color
  // Switching the fill color needs to be reset
  fillColor: [100.100.100.255].// be filled with color
  // The default is white
  coverFillColor: [255.255.255.255].// Forbid fill color
  // The default is the black line color in the example
  boundaryColor: [0.0.0.255].// The color matching tolerance is 1-200
  tolerance: 100.// Whether to forbid padding border colors
  // boundaryColor whether the color can be filled in
  isBanBoundaryColor: true.// Whether each fill automatically replaces the filled color
  // If false, manually update coverFillColor
  isAutoChangeCoverFillColor: true,}Copy the code

Small program examples (snippets of code that provide development ideas)

Note in the mobile terminal to debug, because there are a bug WeChat official Image object is not perfect perform link: developers.weixin.qq.com/s/OAO4vmmf7… If the link fails, you can check it in the Example/miniProgram folder. In my opinion, the best solution to use canvas in the small program is still using the web view to load H5 mode