HTML画布无法显示图像

Question

我相信这一定是我忽略了的一些简单东西，但我似乎无法让我的画布显示存储在服务器上的jpg文件。

<img id="test_img" alt="test" src="/media/tmp/a4c1117e-c310-4b39-98cc-43e1feb64216.jpg"/>
<canvas id="user_photo" style="position:relative;"></canvas>
<script type="text/javascript"> 
    var image = new Image();
    image.src = "/media/tmp/a4c1117e-c310-4b39-98cc-43e1feb64216.jpg";
    var pic = document.getElementById("user_photo");
    pic.getContext('2d').drawImage(image, 0, 0);
</script>

<img> 显示正常，但是画布是空白的，尽管它似乎具有正确的尺寸。有人看到我做错了什么吗？

我的疲惫眼睛将感激任何帮助。

谢谢

- debugoz

Answer 1

您可能希望采用以下方法

image.onload = function() {
    pic.getContext('2d').drawImage(image, 0,0);
}

你需要确保在尝试绘制图像时已经加载了它。

- pollirrata

Answer 2

var initialFloorplanWidth = 0;
var initialFloorplanHeight = 0;
var canvasImage = new Image();
documentReady = function () {
    preloadFloorplan();
}
preloadFloorplan = function () {
    onLoad = function () {
        initialFloorplanHeight = canvasImage.height;
        initialFloorplanWidth = canvasImage.width;
        var canvasHtml = '<canvas id="MainCanvas" width="' + initialFloorplanWidth + '" height="' + initialFloorplanHeight + '">Canevas non supportés</canvas>';
        $("#MainContainer").append(canvasHtml);
        var canvas = $("#MainCanvas")[0];
        var canvasContext = canvas.getContext("2d");
        canvasContext.drawImage(canvasImage, 0, 0);
    }
    canvasImage.onload = onLoad;
    canvasImage.src = initialFloorplan;
}

这段代码运行良好。

- Laurent Perso

Answer 3

也许这与你的其他代码有关。 "user_photo" 在代码中被识别了吗？

- lakam99

Answer 4

尝试在文档加载时执行该操作。我有一种感觉，你的代码是在图像可用之前运行的。你还可以检测图像本身何时加载完成。看这里。

- hvgotcodes

---

谢谢您，先生。将代码添加到图像加载函数中非常有效。不过我有一个问题，我是否需要使用<img>标签将图片加载到画布中？如果将画布代码放在$(document).ready函数中，是否可以实现同样的效果？ - debugoz