gpt4 book ai didi

javascript - 您可以在 javascript 文件中加载 img 标签的 src 然后将其绘制到 Canvas 上吗?

转载 作者:行者123 更新时间:2023-11-28 02:21:54 26 4
gpt4 key购买 nike

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);
}

最佳答案

您可以使用 Javascript Image 类在 Canvas 上绘图。 See this article on MDN .

关于javascript - 您可以在 javascript 文件中加载 img 标签的 src 然后将其绘制到 Canvas 上吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15529573/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com