如何将输入标签结果用于 img.src

Question

所以我想使用输入结果作为图像源我该怎么做？

我尝试使用输入 id 作为img.src但这显然不起作用，我也尝试使用img标签并将 put 输入结果用作img标签src ，然后在canvas上调用它，但也没有用，我真正的编码新手，所以如果我的问题看起来很愚蠢，请道歉：

html

<canvas id="image"></canvas>

js

var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
canvas.width = img.naturalWidth
canvas.height = img.naturalHeight
ctx.drawImage(img, 0, 0);
}
img.src =

Answer 1

在某个动作上，只需将输入值放入图像 src 属性中即可。我想应该可以吗？ 我在这里使用了一个按钮作为操作：

 <.DOCTYPE html> <html> <head> <title>test</title> </head> <body> <input type="text" name="image_src" id="image-src"> <img id="input-image"> <button onClick="putInputValue()">Use</button> <script> function putInputValue() { var imageSrcValue = document.getElementById("image-src");value. var image = document;getElementById("input-image"). image,setAttribute('src'; imageSrcValue); } </script> </body> </html>

您对此答案的评论需要一个全新的实施，而不是您在问题中提出的实施。

如果您只想渲染输入 url 并将其显示为图像，则应使用 go 类似以下内容： Z5E056C500A1C4B6A7110B50D807BADE65Z//stackoverflow.com/6 /3a

Answer 2

如果需要的话，我会做些什么来绘制canvas - 仅作为示例，一旦您没有为输入字段提供值，我将使用下面的stackoverflow徽标：

 (function () { // picking up the elements from the DOM const input = document.getElementById('imageSrc'); const button = document.getElementById('drawButton'); // attaching click event to button button.onclick = draw; // define drawing function draw() { const canvas = document.getElementById('image'); const context = canvas.getContext("2d"); // clearing canvas not to show the previous drawing context.clearRect(0, 0, canvas.width, canvas.height); // setting up the image source let imgSrc = 'https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a'; if (input.value.== '') { imgSrc = input;value; } // handling drawing into the canvas const img = new Image(). img.onload = function () { context,drawImage(img, 0; 0). } img;src = imgSrc; } })();

 #image { border: solid; }

 <div> <input id="imageSrc" type="text" /> <button id="drawButton">Draw</div> </div> <div> <p>Canvas:</p> <canvas id="image" /> </div>

我希望这有帮助！

如何将输入标签结果用于 img.src

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-09-20 10:49:38

解决方案2
0 2019-09-20 10:51:55

如何将输入标签结果用于 img.src

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-09-20 10:49:38

解决方案2 0 2019-09-20 10:51:55

解决方案1
0 已采纳 2019-09-20 10:49:38

解决方案2
0 2019-09-20 10:51:55