drawImage() in React on Rails funktioniert nicht

Question

Es tut mir leid, wenn dies eine der Fragen ist, die grundlegend falsch ist, wie React funktionieren soll, aber ich habe eine Wand getroffen.

Ich baue eine Rails-App mit React, die versucht, ein HTMLCanvas-Element zu erstellen, ein Bild auf diese Leinwand zu zeichnen und dann mit Benutzereingaben zu aktualisieren, um Text auf das Bild zu setzen.

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}/> 
    ); 
} 
} 

Ich habe auskommentierten Code hinzugefügt, um andere Dinge zu zeigen, die ich erfolglos versucht habe.

Und mein HTML ist:

<%= react_component('Image') %> 

Als ich das laufen, erhalte ich:

Uncaught Typeerror: Fehler 'drawImage' auf 'CanvasRenderingContext2D' auszuführen: Der angegebene Wert ist nicht vom Typ ' (HTMLImageElement oder HTMLVideoElement oder HTMLcanvasElement oder ImageBitmap) '

Basierend auf this answer, vermute ich, dass das Problem damit zu tun hat, dass ImageObj.src nicht der richtige Pfad ist, nicht die richtige Eigenschaft usw., aber ich bin Ich bin mir nicht sicher, wie ich vorgehen soll es.

Danke für jede Hilfe zu diesem Thema!

Answer 1

Ich fand die Antwort, um zu tun, was ich tun möchte. Alle Probleme und Gründe, warum Dinge brechen, sind eher ein Roman als ein Beitrag, aber ich wollte meine aktuelle Lösung nur aufstellen, wenn jemand ähnliche Probleme in der Zukunft hat.

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}/> 
    ); 
} 
}) 

Ich bin sicher, dies ist nicht perfekt und Anregungen sind immer noch willkommen für Best Practices, sondern arbeitet.