调用drawImage函数时未捕获TypeError

本文介绍了调用drawImage函数时未捕获TypeError的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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.