你能加载一个img标签吗;s src在javascript文件中，然后将其绘制到画布上

Can you load an img tag's src inside javascript file and then draw it to the canvas?

本文关键字：然后 文件 javascript 绘制 src 加载 一个 标签 img      更新时间：2023-09-26

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给我的唯一错误是：

未捕获的语法错误：意外的标记。

它将此错误指向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);
}

您可以使用Javascript Image类绘制到画布上。请参阅这篇关于MDN的文章。

相关文章：