当我在另一个javascript文件中引用图像时，drawImage不起作用 [英] drawImage doesn't work when I refer to an image in another javascript file
问题描述
（我将在下面展示纯javascript）我有两行代码，在我看来，它们完全相同，但其中一行报告错误。它出现在名为Rendering.coffee的文件中。以下是两行（在coffeescript中）：
(I'll show the pure javascript below) I've got these two lines of code that are, in my mind, doing the exact same thing but one of them reports an error. This appears in a file named "Rendering.coffee". Here are the two lines (in coffeescript):
...
ctx.drawImage(document.getElementById("bg"), 0, 0) #this works
ctx.drawImage(root.resources.bg, 0, 0) #TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.
...
我分配 root.resources.bg 在另一个名为Resources.coffee的文件中，如下所示：
I assign root.resources.bg in another file named "Resources.coffee" like this:
root = exports ? this
root.resources = {}
root.resources.bg = document.getElementById("bg")
这是加载所有代码的html：
Here's the html that loads all the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Canvas tutorial</title>
<script src="Resources.js" type="text/javascript"></script>
<script src="Rendering.js" type="text/javascript"></script>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body onload="window['core'].startGame();">
<canvas id="canvas" width="640" height="480"></canvas>
<img id="bg" src="bg.png" style="display: none">
</body>
</html>
当我将渲染代码更改为此时，我没有收到任何错误：
When I change the rendering code to this, I get no error:
root.resources.bg = document.getElementById("bg")
ctx.drawImage(root.resources.bg, 0, 0)
或
bg = document.getElementById("bg")
ctx.drawImage(bg, 0, 0)
这让我觉得这里有一些更根本的错误。我已经创建了画布上下文后，我才能使用 img 标签吗？如果我更改我的Resources.js以打印出 bg 变量的值，则会打印null，但是如果我在Rendering.js中打印它print [object HTMLImageElement] 为什么它在Resources.js中为空？
That makes me think there's something more fundamentally wrong here. Can I only use img tags after I've already created the canvas context? If I change my "Resources.js" to print out the value of the bg variable it prints "null", but if I print it in the "Rendering.js" it prints [object HTMLImageElement] Why is it null in the "Resources.js"?
这是firefox，by方式。
This is firefox, by the way.
Rendering.js：
Rendering.js:
...
ctx.drawImage(document.getElementById("bg"), 0, 0);
ctx.drawImage(root.resources.bg, 0, 0);
...
Resources.js：
Resources.js:
// Generated by CoffeeScript 1.6.2
(function() {
var root;
root = typeof exports !== "undefined" && exports !== null ? exports : this;
root.resources = {};
root.resources.bg = document.getElementById("bg");
}).call(this);
TL; DR：当我将图像分配到渲染功能之外时，为什么会出现此错误？ #TypeError：无法将值转换为以下任何值：HTMLImageElement，HTMLCanvasElement，HTMLVideoElement。
TL;DR: Why am I getting this error when I assign my image outside of my rendering function? #TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.
这对我有用，但我不确定这是否是一个很好的解决方案：
This worked for me, but I'm not sure if it's a good solution:
root = exports ? this
root.resources = {}
bgResource = undefined
root.resources.bg = ->
if not bgResource
bgResource = document.getElementById("bg")
return bgResource
然后我称之为 root.resources.bg（）
推荐答案
您可以尝试解决这两种方式 -
You can try to solve this two ways -
移动脚本在结束标记< / body> 之前的文件底部。这样就可以在执行任何JavaScript之前加载所有DOM元素。
Move the scripts to the bottom of the file before the closing tag </body>. This way all DOM elements are loaded before any JavaScript is executed.
尝试包装所有内容在脚本文件本身内部依赖于窗口中的DOM元素的加载事件，以防您不能或不我想把它们移到底部：
Try to wrap all inits that are dependent on DOM elements in the window's load event inside the script files themselves in case you cannot or don't want to move them to the bottom:
window.addEventListener('load', function() {
/// init the resource here...
}, false);
这篇关于当我在另一个javascript文件中引用图像时，drawImage不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
