问题描述
你好！
我正在尝试在 ReactJS 下使用 canvas 元素。 当我调用 drawImage() 时出现错误。 除了 drawImage().. 之外，一切正常？
未捕获的类型错误：无法在“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} />;
}
});
1楼
您确定在调用 drawImage() 之前已经加载了 image.jpg 吗？
来自 ：
注意：您不能在图像加载之前调用 drawImage() 方法。 为确保图像已加载，您可以从 window.onload() 或从 document.getElementById("imageID").onload 调用 drawImage()。
2楼
这发生在我身上。
我做了drawImage(x, y, img);
偶然地，当它应该是drawImage(img, x, y);
检查以确保您的参数顺序正确
在我这样做之后，它仍然不起作用。
我正在使用Promises.all() （来自这个答案： : ）并没有意识到result是所有传入值的数组。
我错误地通过了resolve(images) 。
我没有接收图像数组，而是接收了图像数组数组。
确保您只通过resolve()将单个对象传回，除非您希望使用 2D 数组。
我将其更改为resolve(image)并且它起作用了。