Question

我很抱歉，如果这是一个从根本上误解了React应该如何工作的问题之一，但我已经碰壁了。

我正在使用React构建一个Rails应用程序，该应用程序试图创建一个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：无法在'CanvasRenderingContext2D'上执行'drawImage'：提供的值不是'（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap）'

基于this answer，我怀疑问题与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}/>
    );
}
})

我确信这并不完美，建议仍然受到最佳实践的欢迎，但仍有效。

React on Rails中的drawImage（）不起作用

1 个答案: