图像无法在画布上加载

时间:2013-03-07 23:13:24

标签: canvas html5-canvas

我的问题是我在将本地托管图像加载到画布上时遇到问题。我尝试在Web服务器上使用XAMPP和本地托管代码,LightBlue.jpg图像似乎永远不会加载。但是,当我使用网站上的外部图像时,代码完美无缺。我在下面提供了一个例子。

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>

该脚本显示在我的代码中的结束HTML标记的上方。我已经托管了我的网络服务器的所有信息,图像仍然拒绝加载。如果我使用外部图像将代码更改为以下内容,画布将完美地加载图像:

<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>

非常感谢任何指导。

4 个答案:

答案 0 :(得分:3)

你太近了!

您需要在<{strong> base_image.src函数之后放置base_image.onload

<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>

答案 1 :(得分:0)

函数()中缺少一个}。你打开它但忘了关闭。

答案 2 :(得分:0)

阻止XAMPP处理画布脚本的一个功能是mod_rewrite。显然,这是一个简单的修复。这是怎么回事..

  

1:
使用您喜欢的文本编辑器打开apache的配置文件。配置文件通常位于:{apache_dir} /conf/httpd.conf   如果您正在使用XAMPP或WAMP包,那么您将在以下位置找到该文件:{xampp_dir} /apache/conf/httpd.conf   {wamp_dir} /apache/conf/httpd.conf
  2:
搜索以下字符串:#LoadModule rewrite_module modules / mod_rewrite.so并取消注释(删除'#'符号)。
3:
现在搜索另一个字符串AllowOverride None并替换它通过AllowOverride All
4:
最后保存更改,关闭文本编辑器并重新启动Apache服务器。

那应该将你的localhost设置为正确的参数。

答案 3 :(得分:0)

对我来说,把src放在后面,让事情变得更糟......这就是事情 - 在我的情况下,每25ms更新一次。首先是两根针(未显示)然后将这个小圆盖覆盖在针上。

针每次都能正常工作 - 当它看起来合适时,顶部会出现。

  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();