Javascript 调用 drawImage 函数时未捕获的 TypeError
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31457605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError when calling drawImage function
提问by Mikhael Aubut
Bonjour!
你好！
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().. ?
我正在尝试在 ReactJS 下使用 canvas 元素。当我调用 drawImage() 时出现错误。除了 drawImage().. 之外，一切正常？
Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'
未捕获的类型错误：无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是“（HTMLImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 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} />;
}
});
回答by Evgeny Samsonov
Are you sure the image.jpg has been loaded before you call drawImage()?
您确定在调用 drawImage() 之前已经加载了 image.jpg 吗？
From w3schools:
来自w3schools：
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() 方法。为确保图像已加载，您可以从 window.onload() 或从 document.getElementById("imageID").onload 调用 drawImage()。
回答by shieldgenerator7
This happened to me.
这发生在我身上。
I did drawImage(x, y, img);by accident, when it should be drawImage(img, x, y);Check to make sure your arguments are in the correct order
我不drawImage(x, y, img);小心做了，什么时候应该drawImage(img, x, y);检查以确保你的论点顺序正确
After I did that, it still didn't work. I was using Promises.all()(from this answer: https://stackoverflow.com/a/53290838/2336212) and didn't realize that the resultwas an array of all passed in values. I mistakenly passed resolve(images). Instead of receiving an array of images, I received an array of arrays of images. Make sure you only pass a single object back through resolve()unless you expect a 2D array. I changed it to resolve(image)and it worked.
在我这样做之后，它仍然不起作用。我正在使用Promises.all()（来自这个答案：https: //stackoverflow.com/a/53290838/2336212）并且没有意识到这result是一个包含所有传入值的数组。我错误地通过了resolve(images)。我没有接收图像数组，而是接收了图像数组数组。确保只传递一个对象，resolve()除非您希望使用 2D 数组。我把它改成了resolve(image)，它奏效了。
