调用drawImage函数时未捕获TypeError [英] Uncaught TypeError when calling drawImage function
问题描述
Bonjour!
我正在尝试使用ReactJS下的canvas元素。当我调用drawImage()时,我收到一个错误。一切都工作,除了drawImage()..?
I'm trying to make use of canvas element under ReactJS. I'm getting an error when i call drawImage(). Everything work except the drawImage().. ?
未捕获TypeError:无法在'CanvasRenderingContext2D'上执行'drawImage':提供的值是不是类型'(HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap)'
Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'
var Canvas = React.createClass({
componentDidUpdate: function() {
console.log("componentDidUpdate");
},
componentDidMount: function() {
var context = this.getDOMNode().getContext('2d');
this.paint(context);
},
paint: function(context) {
context.save();
context.fillStyle = '#F00';
context.fillRect(0, 0, 400, 400);
context.drawImage("image.jpg", 0, 0);
context.restore();
},
render: function(){
return <canvas width={400} height={400} />;
}
});
推荐答案
你确定image.jpg之前已加载你打电话给drawImage()?
Are you sure the image.jpg has been loaded before you call drawImage()?
来自 w3schools :
注意:在加载图像之前,不能调用drawImage()方法。要确保已加载图像,可以从window.onload()或document.getElementById(imageID)。onload调用drawImage()。
Note: You cannot call the drawImage() method before the image has loaded. To ensure that the image has been loaded, you can call drawImage() from window.onload() or from document.getElementById("imageID").onload.
这篇关于调用drawImage函数时未捕获TypeError的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!