6

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

私が使用している動的画像の URL の例: http://www.website.com/includes/dynamicimage.php?ID=29718958161

この特定の Web サイトにログインし、その 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 テストを実行しようとしていますが、画像がキャンバス要素に描画されないため、この手順は失敗します。

4

1 に答える 1

13

問題は、イメージをキャンバスに描画しようとする前にイメージがロードされるのを待っていないことです。詳細については、この質問の「Playing It Safe」というタイトルのセクションを参照してください。

要するに：

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.
于 2012-04-23T16:57:19.580 に答える