初めて画像が描画されない画像

Question

私はこの質問が何度も聞かれていることを知っています。しかし、img.onloadを使用して、画像が読み込まれた後にキャンバスに描画されるものを適切に実行しました。私はjavascriptには新しく、問題を見つけ出すことができません。関数内でコード全体を実行し、init（）関数から呼び出すことができました。このinit（）関数は、ボディがロードされるとトリガします。

ここには2つの画像があります。両方とも初めて読み込まない。

function getAboutMeImage(){ 
    var galleryCanvas = document.createElement("Canvas"); 
    var galleryContext = galleryCanvas.getContext('2d'); 
    galleryCanvas.width = 800; 
    galleryCanvas.height = 600; 
    galleryCanvas.style.position = "absolute"; 
    galleryCanvas.style.display = "block"; 
    galleryCanvas.style.top = "50%"; 
    galleryCanvas.style.left = "50%"; 
    galleryCanvas.style.marginLeft = "-400px"; 
    galleryCanvas.style.marginTop = "-250px"; 
    galleryCanvas.setAttribute("id","canvas2"); 
    //galleryCanvas.style.background = "#FFF"; 
    document.body.appendChild(galleryCanvas); 

    var points = []; 
    points[0] = new Array(0.3,1.3,0.55,1.05,2.9,1.05,3.1,0.75,9.25,0.75,9.9,1.3,9.9,6.3,9.6,6.6,5.75,6.6,5.3,7.0,2.5,7.0,1,4.3,0.3,4.3,0.3,1.3); 
    var points1 = []; 
    points1[0] = new Array(3.2,1,9.25,1,9.25,6.4,3.2,6.4,3.2,1); 
    drawPoly(galleryCanvas.width,0,0,11.0,7.0,galleryCanvas,points,"rgba(194,242,227,.2)",'#c2f2e3',10); 
    drawPoly(galleryCanvas.width,0,0,11.0,7.0,galleryCanvas,points1,"#000","#000",0); 
    //debugCanvas(galleryCanvas); 
    var y = Math.round((7.0/11.0) * galleryCanvas.width); 
    var width = Math.round(galleryCanvas.width/11.0); 
    var height = Math.round(y/7.0); 
    var img = new Image(); 
    img.onload = function() { 
     var canvas2 = document.getElementById("canvas2"); 
     var ctx2 = galleryCanvas.getContext("2d"); 
     ctx2.drawImage(img,0.4 * width, 1.2*height, img.width, img.height); 
    }; 

    img.src = "../logo.png"; 
    var ratio = img.height * 1.0/ img.width; 
    img.width = Math.round(width*2.7); 
    img.height = Math.round(ratio * img.width); 

    var img2 = new Image(); 
    img2.src = "../about me background2.png"; 
    var ratio = img2.height * 1.0/ img2.width; 
    img2.width = Math.round(width*2.8); 
    img2.height = Math.round(ratio * img.width); 
    img2.onload = function(){ 
     var ctx3 = galleryCanvas.getContext("2d"); 
     ctx3.drawImage(img2,0.4 * width, 2*height, img2.width, img2.height); 
    } 

    setupAboutMe(galleryCanvas,galleryCanvas.width,20,0); 

    return galleryCanvas.toDataURL(); 
} 

私は間違っていますか？

Answer 1

一般的なアドバイス：

が両方onloadコールバックがトリガされていますか？

もしそうでない場合は、画像.srcを確認してください。

また、送信する値をdrawImageにチェックしてください。

結果はx,yですか？

結果はwidth,heightですか？0またはゼロに近いですか？