Javascript将动态图像从URL绘制到画布元素上
我试图使用画布元素的URL将动态PNG图像(由PHP脚本生成)绘制到画布元素上。我不能为我正在测试的页面发布准确的URL,因为你必须登录到该网站 我正在使用的动态图像URL的一个示例是: 如果您登录到此特定网站并将该URL粘贴到您的地址栏中,它将正确显示图像。但是,以下Javascript代码没有正确地将其绘制到画布元素上:Javascript将动态图像从URL绘制到画布元素上,javascript,image,canvas,Javascript,Image,Canvas,我试图使用画布元素的URL将动态PNG图像(由PHP脚本生成)绘制到画布元素上。我不能为我正在测试的页面发布准确的URL,因为你必须登录到该网站 我正在使用的动态图像URL的一个示例是: 如果您登录到此特定网站并将该URL粘贴到您的地址栏中,它将正确显示图像。但是,以下Javascript代码没有正确地将其绘制到画布元素上: function checkImage(imageContext) { var canvas = document.createElementNS(
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测试,但由于图像从未绘制到画布元素,因此此步骤失败。您的问题是,在尝试将图像绘制到画布之前,您没有等待图像加载。有关详细信息,请参阅中标题为“安全操作”的部分 简言之:
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.