Page 1 of 1
Add in Canvas image from an URL added in text box
Posted: 07 Apr 2015, 09:36
by 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.
Add in Canvas image from an URL added in text box
Posted: 07 Apr 2015, 10:20
by 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: 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: