How do I use input tag result to img.src

Question

So I want to use input result as image source how can I do that?

I try to use input id as img.src but that clearly does not work, I also try to use img tag and use the put input result as img tag src, then call it on canvas, but also did not work, I'm really newbie on coding, so please my apologize if my question seems stupid:

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 =

Learner · Accepted Answer · 2019-09-23T08:03:17.033

0

On a certain action, just take the input value and put it in the image src attribute..i guess should work? I have used a button as action here:

<!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>

Your comment on this answer requires a totally new implementation than the one you asked in your question.

If you want to just render the input url and show it as an image, you should go with something like this: https://stackoverflow.com/a/14053147/6935763

edited Sep 23 '19 at 08:03

answered Sep 20 '19 at 10:49

Learner

9,004
6
35
55

sorry long respones, i want something like when i upload image using input type, the file will automatically displayed, not with action button – Misael Indra Wijaya Sep 23 '19 at 02:17
Updated my answer, you should know that your initial question is totally different than what you said here. – Learner Sep 23 '19 at 08:03
i'm sorry, i'm not that good at english and wording, but thx for your help very appreciate – Misael Indra Wijaya Sep 23 '19 at 08:11

norbitrial · Answer 2 · 2019-09-20T11:06:31.357

What I would do to draw into a canvas if that's the requirement is the that - just for the example, I'm using a stackoverflow logo below once you do not provide a value for the input field:

(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>

I hope this helps!

sorry for long response, i want something like when you upload file using input tag, the image will automatically upload to canvas without action button — Misael Indra Wijaya, Sep 23 '19 at 02:48
What do you mean by automatically? There is an `onkeypress` event for `input` tags, you might want to use that for catching events like that. So basically instead of using `onclick` event there is a different one to listen. Let me know you need help to change the code. — norbitrial, Sep 23 '19 at 05:36
If the answer was helpful and solved your problem, please consider marking as the answer. Thank you! — norbitrial, Sep 23 '19 at 09:12

How do I use input tag result to img.src

2 Answers2