Image Not Loading on Canvas

问题:

My issue is that I am having problems loading locally hosted images on to the canvas. I have tried hosting the code on a web server, using XAMPP, and locally, and the LightBlue.jpg image never seems to load. However, when I use an external image from a website the code works perfectly. I have provided an example below.

HTML:

<canvas id="Section1Canvas" width="500" height="95" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

JAVASCRIPT:

<script>
    var canvas = document.getElementById('Section1Canvas'),
    context = canvas.getContext('2d');
    make_base();
    function make_base()
    {
        base_image = new Image();
        base_image.onload = function()
        {
            context.drawImage(base_image, 10, 10);
        }
        base_image.src = 'images\Selection\Bag\Section1\LightBlue.jpg';
    }
</script>

The script appears just above the closing HTML tag within my code. I have hosted all of the information my webserver and the image still refuses to load.If I were to change the code to the following using a external image the canvas loads the image perfectly:

<script>
    var canvas = document.getElementById('Section1Canvas'),
    context = canvas.getContext('2d');
    make_base();
    function make_base()
    {
        base_image = new Image();
        base_image.onload = function()
        {
            context.drawImage(base_image, 10, 10);
        }
        base_image.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
    }
</script>

Any guidance would be greatly appreciated.

回答1:

You were so close!

You need to put base_image.src after the base_image.onload function:

<script>
    var canvas  = document.getElementById('Section1Canvas'),
        context = canvas.getContext('2d');
    make_base();

    function make_base()
    {
        base_image = new Image();
        base_image.onload = function()
        {
           // test that the image was loaded
           alert(base_image);  // or console.log if you prefer
           context.drawImage(base_image, 10, 10);
        }
        base_image.src = 'images\Selection\Bag\Section1\LightBlue.jpg';
    }
</script>

回答2:

there is a } missing in the function(). You opened it but forgot to close.

回答3:

One feature that prevents XAMPP from processing a canvas script is mod_rewrite.This is a simple fix, apparently. this is how..

1:
Open apache’s configuration file using your favorite text editor. The configuration file generally locates at:{apache_dir}/conf/httpd.conf If you are using XAMPP or WAMP package then you will find the file at:{xampp_dir}/apache/conf/httpd.conf {wamp_dir}/apache/conf/httpd.conf
2:
Search for the following string:#LoadModule rewrite_module modules/mod_rewrite.soand uncomment it (remove the ‘#’ sign).
3:
Now search for another string AllowOverride None and replace it by AllowOverride All
4:
Finally save the changes, close your text editor and restart your apache server.

That SHOULD set your localhost to the right paramaters.

回答4:

For me, putting the src after, makes things WORSE.. and here's the thing - in my case this is being updated every 25ms. Two needles first (not shown) then this little round cover over the needles.

The needles work absolutely every time - the top appears when it sees fit.

  ctx.save();
  ctx.beginPath();
  ctx.translate(cX, cY);
  if (centre.complete) ctx.drawImage(centre, kn1, kn2, kn3, kn4); 
  else centre.onload = function () { ctx.drawImage(centre, kn1, kn2, kn3, kn4); } 
  ctx.restore();