Setting User-pasted image url as Canvas Background

mitchsamuels · 01-09-2012, 05:13 AM

Okay, so I have a canvas, and I want the user to be able to copy an image url and paste it into an input box, that will then set it as the canvas background image.

Does anyone know how I can do this?

I was thinking about using the OnChange method in the text input, but I cannot find any help with that online.

My current Canvas Background is (In <head><script>)

Code:

var imgObg = new Image();
imageObj.src = "images/bg.png";

And my text input is

Code:

<form name="input" action="" method="get">
<input type="text" id="textboxBG" onchange="??" />
<input type="submit" value="Submit" />
</form>

If you need more code, or would like to help me out more in depth, I would gladly paypal you a little money. I know this can't be too difficult! I REALLY want this done!

Old Pedant · 01-09-2012, 06:34 AM

You don't show where you *USE* the imgObj to establish the background for the canvas. We have to see that.

I should note that any changes to the background can only apply to the ONE USER who changes them. No other users will see the change. And even the change by the one user will only persist to another page or another session if you store the URL in a cookie.

mitchsamuels · 01-10-2012, 02:29 AM

Oh wow I am dumb!

And yeah, I understand it will only be for the one user. I basically want the user to be able to draw on their image they choose.

I am just learning Canvas, so I thought I would make a little sample site. I think this would be good, but I cannot figure it out, and I cannot find any tutorials!

Here is my full (ish) code,

Basically, my textbox is "usrimg" and the image I want to change is "imageObj"

Code:

<html>
    <head>      
        <script>
 
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                var topLeftCornerX = 5;
    				var topLeftCornerY = 5;
    				var width = 640;
   				 var height = 480;
   				 //Image
   				      var destX = 5;
  					  var destY = 5;
   				 var destWidth = 640;
   				 var destHeight = 480;
  					  var imageObj = new Image();

  					               imageObj.src = "images/cat1small.png";
  					  

  					     
    					
    					imageObj.onload = function(){
        context.drawImage(imageObj, destX, destY, destWidth, destHeight);
    };            

        </script>
    </head>
    <body background="images/bg.png" >

<!-- TABLE TABLE TABLE TABLE TABLE -->
	<table border="0">
		<tr>
			<td>
			
			<!-- Background URL FORM -->
<form name="input" action="" method="get">
<input id="usrimg"/>
<input type="submit" value="Submit" style="border: none;"/>
</form>
			<!--END FORM-->

			</td>

		<td><canvas id="myCanvas" width="655" height="490" align="right"></canvas>

		</td>
		</tr>
	</table>
	<BR>
<BR>

</body>
</html>

rnd me · 01-10-2012, 03:27 AM

you can't render off-site images to a canvas. you can render off-site images to a div's background-image, and you can position that div behind the canvas.

mitchsamuels · 01-10-2012, 03:32 AM

Quote:

Originally Posted by rnd me

you can't render off-site images to a canvas. you can render off-site images to a div's background-image, and you can position that div behind the canvas.

Dang it!
I couldn't export the div with the canvas after they are done drawing though, correct?

What query would I search if I want to be able to have a user upload an image (from their computer) to the canvas background?

What is that called?

Do you know of any tutorials?