React on Rails 中的 drawImage() 不起作用答案

【问题标题】：drawImage() in React on Rails not workingReact on Rails 中的 drawImage() 不起作用
【发布时间】：2016-07-06 20:48:41
【问题描述】：

如果这是从根本上错误的 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') %>

当我运行它时，我得到：

未捕获的类型错误：无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是类型“（HTMLImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 ImageBitmap）”

基于this answer，我怀疑这个问题与 ImageObj.src 不是正确的路径、不是正确的属性等有关，但我不知道该怎么做。

感谢您对此的任何帮助！

【问题讨论】：

您的自定义 Image 组件未返回图像的 DOM 节点。试试ReactDOM.findDOMNode(this.refs.imageObj)（别忘了import ReactDOM from 'react-dom'）

标签： javascript ruby-on-rails-4 canvas reactjs drawimage

【解决方案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}/>
    );
}
})

我确信这并不完美，仍然欢迎提出最佳做法的建议，但确实有效。

【讨论】：