在这里苦苦挣扎。如果我只是在画布上填充或做任何其他事情 - 没问题。我得到没有外部图像的div。尝试过本地图像文件以及URL ...谢谢!
import React, { Component, PropTypes } from 'react';
export default class CanvasCreator extends Component {
componentDidMount() {
this.updateCanvas();
}
updateCanvas() {
const ctx = this.refs.canvas.getContext('2d');
var imageObj1 = new Image();
imageObj1.src = 'https://s-media-cache-ak0.pinimg.com/236x/d7/b3/cf/d7b3cfe04c2dc44400547ea6ef94ba35.jpg'
ctx.drawImage(imageObj1,0,0);
}
render() {
return (
<canvas ref="canvas" width={300} height={300}> </canvas>
);
}
};
答案 0 :(得分:3)
您缺少onload方法。这对你有用:
updateCanvas() {
const ctx = this.refs.canvas.getContext('2d');
var imageObj1 = new Image();
imageObj1.src = 'https://s-media-cache-ak0.pinimg.com/236x/d7/b3/cf/d7b3cfe04c2dc44400547ea6ef94ba35.jpg'
imageObj1.onload = function() {
ctx.drawImage(imageObj1,0,0);
}
}