如何將輸入標簽結果用於 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