Question

我试图创建一个允许我从一系列图片中进行选择的页面，可以选择自己的URL，但我偶然发现了一个问题。我试图使用放置在示例图像下的按钮来更改通过管道传输到函数中的源图像，但我似乎无法使其工作。这是我的代码：

<html>
<head>
<script>
function updateImage(imageUsed)
{
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.drawImage(imageUsed,0,0,500,500);
}
</script>
<style>
#header
{
    background-color:brown;
    color:black;
    text-align:center;
    padding:5px;
}

#defaultSelection
{
    line-height:30px;
    background-color:#eeeeee;
    width:200px;
    float:left;
    padding:5px;
    text-align:center;
}

#canvasID
{
    background-color:grey;
    width:1000px;
    float:left;
    padding:10px; 
    text-align:center;
}
</style>
</head>
<body"> 
<div id="header">
<h1> Welcome</h1>
<h2>Please select an image, or upload your own below.</h2>
</div>
<div id="defaultSelection">
<img id="Image1" src="Image1.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage(Image1)">Use this image</button>
<br>
<img id="Image2" src="Image2.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage(Image2)">Use this image</button>
<br>
<img id="Image3" src="Image3.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage()">Use this image</button>
<br>
<img id="Image4" src="Image4.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage()">Use this image</button>
</div>
<div id="canvasID">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3; background-color:white;">
</canvas>
</div>
</body>
</html>

有谁知道为什么它可能不会传递图像？它们在页面上显示正确，所以我知道源是正确的，但它们似乎并不想传递给函数。

Answer 1

尝试将您的javascript函数更新为：

function updateImage(imageUsed) {
    var c = document.getElementById("myCanvas"),
        ctx = c.getContext("2d"),
        image = document.getElementById(imageUsed);
    ctx.drawImage(image,0,0,500,500);
}

然后输出您的按钮，如：

<button onclick="updateImage('Image1')">Use this image</button>

Answer 2

您需要将元素的ID作为字符串

传递

<button onclick="updateImage('Image1')">Use this image</button>

并且在updateImage方法中，您需要从传递的ID中获取图像对象

function updateImage(imageUsed)
{
    var c = document.getElementById("myCanvas");
    **imageUsed = document.getElementById(imageUsed);**
    var ctx = c.getContext("2d");
    ctx.drawImage(imageUsed,0,0,500,500);
}

这是完整的工作代码

<html>
<head>
<script>
function updateImage(imageUsed)
{
    var c = document.getElementById("myCanvas");
    imageUsed = document.getElementById(imageUsed);
    var ctx = c.getContext("2d");
    ctx.drawImage(imageUsed,0,0,500,500);
}
</script>
<style>
#header
{
    background-color:brown;
    color:black;
    text-align:center;
    padding:5px;
}

#defaultSelection
{
    line-height:30px;
    background-color:#eeeeee;
    width:200px;
    float:left;
    padding:5px;
    text-align:center;
}

#canvasID
{
    background-color:grey;
    width:1000px;
    float:left;
    padding:10px; 
    text-align:center;
}
</style>
</head>
<body"> 
<div id="header">
<h1> Welcome</h1>
<h2>Please select an image, or upload your own below.</h2>
</div>
<div id="defaultSelection">
<img id="Image1" src="Image1.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image1')">Use this image</button>
<br>
<img id="Image2" src="Image2.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image2')">Use this image</button>
<br>
<img id="Image3" src="Image3.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image3')">Use this image</button>
<br>
<img id="Image4" src="Image4.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image4')">Use this image</button>
</div>
<div id="canvasID">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3; background-color:white;">
</canvas>
</div>
</body>
</html>

Answer 3

我认为您需要加载图片，以便找到网址

function updateImage(imageUsed)
{
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById(imageUsed);
    ctx.drawImage(img,0,0,500,500);
}

通过按钮将变量传递给函数（HTML / Javascript）

3 个答案: