Skip to content Skip to sidebar Skip to footer
Home / Canvas / Html / Javascript

Select Different Image For Canvas Background

Post a Comment
I need to know how can I change the image background in canvas to draw what is needed in the selected image? I use this script William malone canvas and I can save the image in DB

Solution 1:

change the image background is very simple,you just need to write a function and do this:

outlineImage.src = "your image src";

then background image will changed! You may have a try.

Is this you wanted?

make a select list

change selected option to change background

You should load needed js files before that function,and be sure that js file is avaliable,especially html5-canvas-drawing-app.js,It's the core function,prepareCanvas and outlineImage are defined in this file.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Create HTML5 Canvas JavaScript Drawing App Example</title>
  </head>

  <body>

    <div id="canvasDiv"></div>

    <!--src link write in attribute name or id,I suggest that-->
    <select id="changeSrc">
        <option name="images/1.png">Bg1</option>
        <option name="images/2.png">Bg2</option>
    </select>

    <!-- Load js Files -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <script type="text/javascript" src="html5-canvas-drawing-app.js"></script>

    <script type="text/javascript"> 
    $(document).ready(function() {
         prepareCanvas();
    });

    $("#changeSrc").change(function(){
      var src=$(this).children(':selected').attr('name');    //get selected option's name
      outlineImage.src=src;                                  //change background!
    });
    </script>

  </body>
</html>

If it doesn't work yet,I can write an example send to you.


Post a Comment for "Select Different Image For Canvas Background"