canvas - 图像未加载到画布上

Question

我的问题是我在将本地托管的图像加载到画布上时遇到问题。我曾尝试在 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>

任何指导将不胜感激。

score 4 · Accepted Answer

你离得太近了！

您需要在函数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>

score 0 · Accepted Answer

0

function() 中缺少一个 }。你打开它但忘记关闭它。

于 2014-09-17T20:58:22.263 回答

score 0 · Accepted Answer

对我来说，把 src 放在后面，会让事情变得更糟......这就是事情 - 在我的情况下，这是每 25 毫秒更新一次。首先是两根针（未显示），然后是针上的这个小圆盖。

针每次都绝对有效 - 顶部会在它认为合适时出现。

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

score 0 · Accepted Answer

在调用 drawImage 函数时还要指定图像的宽度和高度。

context.drawImage(img, x, y, width, height);

score 0 · Accepted Answer

阻止 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 设置为正确的参数。

canvas - 图像未加载到画布上

5 回答 5

Related

Reference