Javascript 将动态图像从 URL 绘制到画布元素上答案

【问题标题】：Javascript draw dynamic image from URL onto canvas elementJavascript 将动态图像从 URL 绘制到画布元素上
【发布时间】：2012-04-23 14:47:36
【问题描述】：

我正在尝试使用其 URL 将动态 PNG 图像（由 PHP 脚本生成的图像）绘制到 Canvas 元素上。我无法为我正在测试的页面发布确切的 URL，因为您必须登录到该网站。

我正在使用的其中一个动态图像 URL 的示例是：http://www.website.com/includes/dynamicimage.php?ID=29718958161

如果您登录到此特定网站并将该 URL 粘贴到您的地址栏中，它将正确显示图像。但是，以下 Javascript 代码未正确将其绘制到画布元素上：

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;
}

我有两个弹出窗口显示动态图像和画布上绘制的内容，但画布始终是空白的。然后，我尝试在设置“pix”变量后对图像进行进一步的 RGB 测试，但由于图像从未绘制到画布元素，因此此步骤失败。

【问题讨论】：

标签： javascript image canvas

【解决方案1】：

您的问题是在尝试将图像绘制到画布之前，您没有等待图像加载。有关详细信息，请参阅 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.

【讨论】：