Add in Canvas image from an URL added in text box

[PloMar]

Hello,
I have a canvas element and a form with a text box and a button. I want to be able to put an image url into the text box, and after click on the button, to have the image added in the canvas.
I DO NOT want to upload the picture as a file. I just want to put in canvas the image from the URL added in text box.
Here's the html code with the form and canvas:

Code: Select all

<form action="#" method="post">
  <input type="url" name="imglink" id="imglink"  placeholder="Insert image URL here" /><br>
  <input type="button" value="Add Image" id="btn1" />
</form>
<canvas width="600" height="500" id="cnv1"></canvas>

Any ideas?
Thanks.

Hi,
You can use this script. When click on the button, it adds the image from URL in page (into a Div, #pic1), then, the function addCnvImg() gets the image added in page and displays it in canvas.
Here's the script:

Code: Select all

<form action="#" method="post">
  Image URL: <input type="url" name="imglink" id="imglink"  placeholder="Insert image URL here" size="35" />
  <input type="button" value="Add Image" id="btn1" />
</form>
<div id="pic1"></div>
<canvas width="400" height="250" id="cnv1"></canvas>

<script>
/* Script to put in canvas image from url added in text-box (from: https://coursesweb.net/ ) */
function ImgCnv() {
  var cnv1 = document.getElementById('cnv1');  // get the canvas element

  // to clear the canvas
  var clearCanvas = function() {
    var ctx = cnv1.getContext('2d');     // gets reference to canvas context
    ctx.beginPath();    // clear existing drawing paths
    ctx.save();         // store the current transformation matrix

    // Use the identity matrix while clearing the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, cnv1.width, cnv1.height);

    ctx.restore();        // restore the transform
  }

  // add image from url in canvas
  var addCnvImg = function(url) {
    if (cnv1.getContext) {
      clearCanvas();  // to clear the canvas context
      var ctx = cnv1.getContext('2d');

      // get a reference to the image, then add it in canvas context
      var img_elm = document.getElementById('img1');
      ctx.drawImage(img_elm, 0, 0, img_elm.width, img_elm.height);
      document.getElementById('pic1').innerHTML = '';  // clear the #pic1
    }
  }

  // register click event to #btn1
  document.getElementById('btn1').addEventListener('click', function(){
    // add the image (with display:none) in #pic1
    document.getElementById('pic1').innerHTML = 'LOADING...<img src="'+ document.getElementById('imglink').value +'" alt="Image" id="img1" style="display:none" />';

    // after the image is loaded, call addCnvImg() to add it in canvas
    document.getElementById('img1').onload = function(){
      addCnvImg(document.getElementById('imglink').value);
    }
  });
}
ImgCnv();  // call the function to execute its instructions
</script>

Demo:

Image URL: