10

これは私が見落としている単純なものでなければならないと確信していますが、キャンバスにサーバーに保存されている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>表示されますが、キャンバスは空白ですが、正しい寸法になっているようです。私が間違っていることを誰かが見ていますか？

私の疲れた目はどんな助けにも感謝します。

ありがとう

4

4 に答える 4

13

次のアプローチを使用することをお勧めします

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

したがって、描画しようとするときに画像がロードされていることを確認してください。

于 2012-05-15T01:31:15.190 に答える
3 
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;
}

このコードはうまく機能します。

于 2016-05-24T09:34:05.650 に答える