Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Setting User-pasted image url as Canvas Background

    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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    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?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •