feat:add pure color props type , change options [image] => [cover]

[lijinke666]

Hello :)

your code options only drawImage accept a image props option

i change the image props to cover It turns it into two different types of parameters

Not only image cover String, Can also be use hexadecimal coding or rgba()

like #396 or rgba(255,255,255,.3)

please see index.js

  componentDidMount() {
    const { cover } = this.props
    this.isDrawing = false;
    this.lastPoint = null;
    this.ctx = this.canvas.getContext('2d');

    const isColorCover = this.checkColorCover(cover)

    if (!isColorCover) {
      const image = new Image();
      image.crossOrigin = "Anonymous";
      image.onload = () => {
        this.ctx.drawImage(image, 0, 0);
        this.setState({ loaded: true });
      }
      image.src = cover;
    } else {
      const { width, height } = this.canvas
      this.ctx.save()
      this.ctx.fillStyle = cover
      this.ctx.beginPath()
      this.ctx.rect(0, 0, width, height)
      this.ctx.fill()
      this.ctx.restore()
      this.setState({ loaded: true });
    }

  }
  checkColorCover(cover) {
    return (/^#(\d|\w){3,6}$/.test(cover) || /^rgba?\(.*\)/.test(cover))
  }

And I made a little bit of improvement

i add a new package classnames in your code

This allows the user to expand his own like className , style

    return (
      <div
        className={classnames("ScratchCard__Container", className)}
        style={containerStyle}
        {...attr}
      >
        <canvas {...canvasProps}></canvas>
        <div className="ScratchCard__Result" style={resultStyle}>
          {this.props.children}
        </div>
      </div>
    );