你能在javascript文件中加载一个img标签的src然后把它画到画布上吗？答案

【问题标题】：Can you load an img tag's src inside javascript file and then draw it to the canvas?你能在javascript文件中加载一个img标签的src然后把它画到画布上吗？
【发布时间】：2013-03-21 03:12:34
【问题描述】：

index.html

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <title>DCView</title>

    <script type="text/javascript" src="dcview.js"></script>
</head>
<body>
    <div style="float:center; text-align:center;">
        <canvas id="dcviewCanvas" width="1024" height="1024"/>
        <img id="bgImage" src="" hidden="true"/>
    </div>
</body>
</html>

dcview.js

var backgroundImage,
    backgroundImageSrc,
    canvas,
    context;

window.onload = function()
{
    //Initially set the background image source to DCView.png
    backgroundImageSrc = "Foundation\\WebService\\Downloads\\DCView.png";

    //Load the background image with the given source
    loadBackgroundImage(backgroundImageSrc);
}

function loadBackgroundImage(imageSrc)
{
    canvas = document.getElementById("dcviewCanvas");
    context = canvas.getContext("2d");

    backgroundImage = document.getElementById("bgImage");
    backgroundImage.src = imageSrc;

    context.drawImage(backgroundImage, 0, 0);
}

当我尝试在 chrome 中加载 index.html 时，它不会加载背景图像。但是当我将 img 标签的 src 硬编码到该路径时，它会继续加载它。

chrome 给我的唯一错误是：

Uncaught SyntaxError: Unexpected token .

它将这个错误指向 dcview.js 中的第 47 行。

我的处理方式完全错误吗？我是 HTML 和 Javascript 的初学者。

谢谢，

维拉特

更新

dcview.js

window.onload = function()
{
    //Initially set the background image source to DCView.png
    backgroundImageSrc = 'Foundation/WebService/Downloads/Layout_Basement.png';

    //Load the background image which is initially set to DCView.png
    loadBackgroundImage(backgroundImageSrc);

    //Load the other various pin images;
    loadPinImages();
}

function loadBackgroundImage(imageSrc)
{
    context = document.getElementById('dcviewCanvas').getContext('2d');

    backgroundImage = new Image();
    backgroundImage.src = imageSrc;

    backgroundImage.onload = function(){
        context.drawImage(backgroundImage, 0, 0);
    };
}

更新

加载背景图像后，我在顶部绘制的其他图像将被绘制在背景图像下方。想法？

window.onload = function()
{
    //Initially set the background image source to DCView.png
    backgroundImageSrc = 'Foundation/WebService/Downloads/Layout_Basement.png';

    //Load the background image which is initially set to DCView.png
    loadBackgroundImage(backgroundImageSrc);

    canvas = document.getElementById('dcviewCanvas');
    context = canvas.getContext('2d');
    context.drawImage(sortationLanePinBlue, 0, 0);
}

【问题讨论】：

我没数过，但看起来你这里没有给我们展示 47 行代码。
您说得对，与原始问题相比，我在发布此问题时删除了一些代码。基本上它指向这条线：“window.onload = function()”谢谢
我不知道这是否是您的问题的原因，但您似乎正在将 .src 属性的值分配给 backgroundImage，然后尝试访问下一行的 .src 属性。这似乎不太正确。
我发现了导致 Unexpected SyntaxError 的错误并修复了它（请参阅我对问题所做的编辑）。但是现在我第一次加载屏幕时，画布上什么都没有显示；如果我刷新它，我就可以查看我的图像。
是的，您是正确的@bmceldowney，我没有看到您的评论，因为我在此过程中正在输入我的评论。谢谢。

标签： javascript html canvas

【解决方案1】：

您可以使用 Javascript Image 类在画布上进行绘制。 See this article on MDN.

【讨论】：