Javascript 如何在画布上加载本地图像？

您好，感谢您抽出时间阅读此问题：

我试着做一个练习来学习React，因为我最近用JS编写了一个代码，将一个文件从本地加载到画布上，当用户点击它时，就会画出圆圈；我试着做同样的反应

以下是JS练习：

我在canvas组件的渲染中创建了一个canvas，然后调用make_base函数，该函数获取上下文并将图像加载到其中

代码如下：

import React from 'react';


class Canvas extends React.Component {
    //A canvas to display images with a title


    constructor(props) {
        super(props);

        this.state = {x: 0, y: 0, inside: ''};

        this.handleClick = this.handleClick.bind(this);
        this.make_base = this.make_base.bind(this);
    }

    _onMouseMove(e) {
        this.setState({x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY});
    }

    componentDidMount() {
        document.addEventListener('click', this.handleClick);
    }

    componentWillUnmount() {
        document.removeEventListener('click', this.handleClick);
    }

    handleClick(e) {
        e.stopPropagation();
        console.log('INSIDE');
        this.setState({inside: 'inside'});
    }

    make_base(image) {
        const context = this.refs.canvas.getContext('2d');
        let base_image = new Image();
        base_image.src = image;
        base_image.onload = function () {
            context.drawImage(base_image, 0, 0);
        }
    }


    render() {

        const {x, y, inside} = this.state;

        return (
            <div className="previewComponent">
                <div className="imgPreview">
                    {this.props.title}

                    <canvas ref="canvas" width={300} height={300}></canvas>
                    {this.make_base(this.props.image)}

                    <img src={this.props.image} alt="" onMouseMove={this._onMouseMove.bind(this)}
                         onClick={this.handleClick.bind(this)}/>

                    <h1>Mouse coordinates: {x} {y}</h1>
                    <h2>Inside?: {inside}</h2>
                </div>
            </div>
        )
    }
}

export {Canvas};

控制台告诉我们：

TypeError: Cannot read property 'getContext' of undefined
Canvas.make_base
C:/Users/YonePC/WebstormProjects/prototipo/src/components/animals/Canvas.js:36
  33 |    }
  34 | 
  35 |    make_base(image) {
> 36 |        const context = this.refs.canvas.getContext('2d');
  37 |        let base_image = new Image();
  38 |        base_image.src = image;
  39 |        base_image.onload = function () {
View compiled
Canvas.render
C:/Users/YonePC/WebstormProjects/prototipo/src/components/animals/Canvas.js:55
  52 |                    {this.props.title}
  53 | 
  54 |                    <canvas ref="canvas" width={300} height={300}></canvas>
> 55 |                    {this.make_base(this.props.image)}
  56 | 
  57 |                    <img src={this.props.image} alt="" onMouseMove={this._onMouseMove.bind(this)}
  58 |                         onClick={this.handleClick.bind(this)}/>

如果假定我们已经在render方法中创建了canvas，我不理解为什么getContext没有定义

此外，我还研究了：

编辑：

我尝试了建议的答案，但控制台仍然告诉我们：

TypeError: Cannot read property 'getContext' of undefined
Canvas.make_base
C:/Users/YonePC/WebstormProjects/prototipo/src/components/animals/Canvas.js:36
  33 |    }
  34 | 
  35 |    make_base(image) {
> 36 |        const context = this.canvas.getContext('2d');
  37 |        let base_image = new Image();
  38 |        base_image.src = image;
  39 |        base_image.onload = function () {
View compiled
Canvas.render
C:/Users/YonePC/WebstormProjects/prototipo/src/components/animals/Canvas.js:55
  52 |                    {this.props.title}
  53 | 
  54 |                    <canvas ref={(canvas) => this.canvas = canvas} width={300} height={300}></canvas>
> 55 |                    {this.make_base(this.props.image)}
  56 | 
  57 |                    <img src={this.props.image} alt="" onMouseMove={this._onMouseMove.bind(this)}
  58 |                         onClick={this.handleClick.bind(this)}/>
View compiled

如果我们对正在编写上下文的行进行注释，我们会看到两个空画布：

可能不应该在render方法中创建画布，因为外部方法仍然无法访问它

编辑2：给出的答案很有效：

然而，我们希望在鼠标点击的地方绘制光标，而不是按钮，所以这是一个问题，我们如何获得坐标并将它们关联到画布中绘制

---

谢谢您的帮助。

您使用的参考错误

必须将ref设置为类变量，如this.canvas中所示

类应用程序扩展了React.Component{ 构造器{ 超级作物； this.makeBase=this.makeBase.bindthis； this.recordMouse=this.recordMouse.bindthis； } 记录mouseevent{ const ctx=this.canvas.getContext'2d'； ctx.beginPath； ctx.fillRectevent.nativeEvent.offsetX，event.nativeEvent.offsetY，3,3； ctx.stroke； } makeBase{ const ctx=this.canvas.getContext'2d'； ctx.beginPath； ctx.arc95,50,40,0,2*Math.PI； ctx.stroke； } 渲染{ 回来 this.canvas=canvas}width=200 height=100 onMouseMove={this.recordMouse}/> 打基础 ; } } ReactDOM.render、document.getElementByIdroot；

---

谢谢你的帮助和快速回复。我试过你的密码，然后我读了文件。我必须说它仍然显示TypeError:无法读取未定义的属性“getContext”@Enoy我已经添加了一个关于它应该如何工作的工作片段谢谢你的帮助。当点击按钮时，它确实起作用。但是，我们如何使用当前光标位置来执行此操作？用鼠标点击！？这将是一个完全不同的问题。对吧?@Enoyth问题本身就是：如何在React中将本地图像加载到画布？