Javascript動的イメージをURLからキャンバス要素にドロー

Question

動的PNGイメージ（PHPスクリプトによって生成されたイメージ）をURLを使用してCanvas要素に描画しようとしています。私はあなたがウェブサイトにログインしなければならないので、これをテストしているページの正確なURLを実際に投稿することはできません。

私が使用している動画URLの1の例は次のとおりです。http://www.website.com/includes/dynamicimage.php?ID=29718958161

あなたは、この特定のウェブサイトにログインし、あなたのアドレスバーにそのURLを貼り付けた場合、それは正しく画像を表示していました。ただし、次のJavaScriptコードは、適切にcanvas要素の上に描画されていません。

function checkImage(imageContext) { 
    var canvas = document.createElementNS(
     'http://www.w3.org/1999/xhtml', 'canvas'); 
    canvas.width = imageContext.width; 
    canvas.height = imageContext.height; 

    var context = canvas.getContext("2d"); 
    var img = new Image(); 
    img.src = imageContext.src; 
    context.drawImage(img, 0, 0); 

    newWindow = window.open(imageContext.src, 'newWin', 'width=300,height=300'); 
    newWindow2 = window.open('', 'newWin2', 'width=300,height=300'); 
    newWindow2.document.body.appendChild(canvas); 

    var imgd = context.getImageData(0, 0, imageContext.width, 
     imageContext.height); 
    var pix = imgd.data; 
} 

私は2つのポップアップウィンドウが動的画像とどのようなキャンバスに描かれているの両方を表示するが、キャンバスは常に抱えていますブランク。私は、 "pix"変数を設定した後、画像上でさらにRGBテストを試みていますが、画像がキャンバス要素に描画されることはないため、この手順は失敗します。

Answer 1

問題はキャンバスに描画しようとする前にイメージが読み込まれるのを待っていないことです。詳細については、"Playing It Safe"を参照してください。this question要するに

：迅速な対応や説明のための

var img = new Image;  // First create the image... 
img.onload = function(){ // ...then set the onload handler... 
    ctx.drawImage(img,0,0); 
}; 
img.src = "someurl";  // *then* set the .src and start it loading.