调用 drawImage 函数时未捕获的 TypeError

IT技术 javascript canvas reactjs
2021-04-27 14:29:27

你好！

我正在尝试在 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} />;
    }
});
2个回答

您确定在调用 drawImage() 之前已经加载了 image.jpg 吗？

来自w3schools：

注意：在图像加载之前不能调用 drawImage() 方法。为确保图像已加载，您可以从 window.onload() 或从 document.getElementById("imageID").onload 调用 drawImage()。

这发生在我身上。

我不drawImage(x, y, img);小心做了，什么时候应该drawImage(img, x, y);检查以确保你的论点顺序正确

在我这样做之后，它仍然不起作用。我正在使用Promises.all()（来自这个答案：https : //stackoverflow.com/a/53290838/2336212）并且没有意识到这result是一个包含所有传入值的数组。我错误地通过了resolve(images)。我没有接收图像数组，而是接收了图像数组数组。确保只传递一个对象，resolve()除非您希望使用 2D 数组。我把它改成了resolve(image)，它奏效了。

其它你可能感兴趣的问题
上一篇React Native - 如何制作边框图像？ 下一篇ReactJS 错误未能编译 'define' 未定义