Question

我想用这个https://github.com/JeroenvO/html5-colorpicker

制作一个反应组件

所以我复制了colorPicker.js并导出了构造函数。然后我做了一个这样的组件

import React, { Component } from 'react'
import colorPicker from '../../../../../imports/colorPicker/colorPicker.js'

export default class ColorPicker extends Component {
  myDiv = null
  myPicker = null
  componentDidMount = () => {
    const { onColorChange } = this.props
    this.myPicker = new colorPicker(this.myDiv, {
        bgcolor: 'rgba(50,50,50,0)',
        onColorChange: function () {
          console.log('color in HSV', this.getColorHSV())
          console.log('color in HSL', this.getColorHSL())
          console.log('color in RGB', this.getColorRGB())
          onColorChange()
        },
        onCenterClick: function () {
              window.alert('You clicked the center!')
        }
    })
  }

  render () {
    return (
      <canvas ref={(elem) => this.myDiv = elem} width="500" height="500" id="colorPicker1"></canvas>
    )
  }
}

然后我收到这样的错误 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

我想我也应该像在存储库中一样提供画布的图像。所以我将colorPicker.js所在的图片放在imports/colorPicker中。但是我仍然得到同样的错误。如果问题出现在图像中，则无论如何都无法访问图像。你能帮我解决这个问题吗？

Answer 1

一种解决方案是将图像网址作为选项传递

image: 'http://hayk94.gitlab.io/plain-html/color-500.png',

在React和Meteor项目中使用JeroenvO / html5-colorpicker

1 个答案: