canvas - 图像未加载到 Canvas 上

Question

我的问题是我在将本地托管的图像加载到 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>

java 脚本:

<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 标记的正上方。我已经托管了我的网络服务器的所有信息，图像仍然拒绝加载。 如果我使用外部图像将代码更改为以下内容， Canvas 可以完美地加载图像:

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

任何指导将不胜感激。

Answer 1

你离得太近了!

您需要输入 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>