Add in Canvas image from an URL added in text box

PloMar
Posts: 48

Add in Canvas image from an URL added in text box

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.

Admin
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: http://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:

Similar Topics