调用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屋！