Question

的Bonjour！

我正在尝试使用ReactJS下的canvas元素。当我调用drawImage（）时，我收到一个错误。一切都有效，除了drawImage（）..？

Uncaught TypeError：无法在'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} />;
    }
});

Answer 1

你确定在调用drawImage（）之前已经加载了image.jpg吗？

来自w3schools：

注意：在加载图像之前，无法调用drawImage（）方法。要确保已加载图像，可以从window.onload（）或document.getElementById（“imageID”）。onload调用drawImage（）。

Answer 2

这件事发生在我身上。

我偶然地drawImage(x, y, img);做了drawImage(img, x, y);，请检查确保您的论点顺序正确

我这样做之后，仍然没有用。我使用的是Promises.all()（来自此答案：https://stackoverflow.com/a/53290838/2336212），却没有意识到result是所有传入值的数组。我错误地通过了resolve(images)。我没有接收图像数组，而是接收了图像数组数组。确保您仅通过resolve() 返回单个对象，除非您期望使用2D数组。我将其更改为resolve(image)，它可以正常工作。

调用drawImage函数时未捕获TypeError

2 个答案: