drawImage() в React на Rails не работает

Question

Извините, если это один из тех вопросов, которые в корне ошибочно предполагают, что React должен работать, но я попал в стену.

Я создаю приложение Rails с использованием React, которое пытается создать элемент HTMLCanvas, нарисовать рисунок на этом холсте, а затем обновить его с помощью пользовательского ввода, чтобы поместить текст в изображение.

class Image extends React.Component {

componentDidMount(){
    this.updateCanvas();
}

updateCanvas(){
// var imageObj = new Image();
// imageObj.src = './app/assets/image.jpg'

<Image ref='imageObj' source={{uri: '/assets/image.jpg'}} style={{width: 40, height: 40}} />

    var ctx = this.refs.canvas.getContext('2d');

    ctx.drawImage(this.refs.imageObj, 0, 0);
}

render() {
    return (
        <canvas ref='canvas' width={867} height={600}/>
    );
}
}

Я включил закомментированный код, чтобы показать другие вещи, которые я безуспешно пытался.

И мой HTML-код:

<%= react_component('Image') %>

Когда я запускаю это, я получаю:

Uncaught TypeError: Не удалось выполнить 'drawImage' для 'CanvasRenderingContext2D': предоставленное значение не относится к типу '(HTMLImageElement или HTMLVideoElement или HTMLCanvasElement или ImageBitmap)'

Основываясь на этом ответе, я подозреваю, что проблема связана с тем, что ImageObj.src не является правильным путем, не имеет правильного свойства и т. Д., Но я не уверен, как это сделать.

Спасибо за любую помощь в этом!

Answer 1

Я выяснил ответ, чтобы сделать то, что я хочу сделать. Все проблемы и причины, по которым что-то ломалось, - это скорее роман, чем пост, но я хотел изложить свое текущее решение просто на случай, если у кого-нибудь возникнут подобные проблемы в будущем.

HTML:

<%= react_component('myCanvasComponent') %>

myCanvasComponent.js.jsx.erb:

var myCanvasComponent = React.createClass({

componentDidMount: function(){

var draw = function(){
    ctx.drawImage(objectImg, 100, 100);
}

var can = this.refs.canvas;
var ctx = can.getContext('2d');

var objectImg = new Image();
var imgPath = "<%= image_path('image.jpg') %>";
objectImg.src = imgPath

objectImg.onload = function(){
    draw();
}

},

render: function() {
    return (
        <canvas ref='canvas' width={867} height={600}/>
    );
}
})

Я уверен, что это не идеально, и предложения все еще приветствуются для лучших практик, но работают.