在加载到数组后在画布上绘制图像 [英] draw image on canvas after load into array

问题描述

我尝试在每个图片加载后，创建一个要在画布上显示的图片数组。没有错误，无绘图...

  var x = ... 
 var y = ... 
 var canvas = document.getElementById（sCanvasName）; 
 var context = canvas.getContext（'2d'）; 
 
 var imageCardObj = []; 
 
 // vCards包含图像文件名
 for（var k = 0; k  imageCardObj [k] = new Image 
 
 var func = function（）{
 var c = arguments [3]; 
 try {
 c.drawImage（arguments [0]，arguments [1]，arguments [2]）; 
} catch（e）{
 alert（e.message）
} 
} 
 
 imageCardObj [k] .onload = func（imageCardObj [k ]，x，y，context）; 
 
 imageCardObj [k] .src =res / img /+ vCards [k] .trim（）+。png; 
 
 x + = 40; 
} 
  

解决方案

c $ c> func（）处理程序并将结果提供给图像的 onload 处理程序。

试试这个：

$ b b

  var func = function（）{
 
 //this将是这里的当前图像
 
 var c = arguments [3]; 
 try {
 c.drawImage（this，x，y）; //你需要引用x和y 
} catch（e）{
 alert（e.message）
} 
} 
 
 imageCardObj [k ] .onload = func; //只有一个引用
  

如果你需要不同的x和y，那么你需要维护侧，在一个额外的数组或使用对象来嵌入图像，其预期的x和y，并使用url在 func（）回调中标识出有问题的图像。

另请注意，加载顺序可能会因加载的最后一个图像在第一个图像之前完成而有所不同，因此当您绘制图像时，它们可能不会以相同的顺序显示。 p>

您可能要这样做：

  var files = [url1 ，url2，url，...]，
 images = []，
 numOfFiles = files.length，
 count = numOfFiles; 
 
 //函数一次加载所有图像
 function loadImages（）{
 
 //通过文件名数组
 for i = 0; i  
 //创建图像元素
 var img = document.createElement（'img'）; 
 
 //使用通用加载器，因为我们需要计算文件
 img.onload = imageLoaded; 
 //img.onerror = ...句柄错误... 
 //img.onabort = ...句柄错误... 
 
 img.src = files [i]; 
 
 //按照与文件名相同的顺序将图像推入数组
 images.push（img）; 
} 
} 
 function imageLoaded（e）{
 
 //每个成功加载我们倒计数
 count--; 
 if（count === 0）draw（）; //所有图片加载时启动
} 
  

图片已加载 - 图片现在的顺序与原始数组相同：

  function draw（）{
 for（var i = 0，img; img = images [i ++];）
 ctx.drawImage（img，x，y）; //或从数组获取x和y 
} 
  

希望这有助于！ p>

I tried to create an array of Image to be displayed on a canvas, after each image is loaded. No errors, no draw...

    var x=...
var y=...
var canvas = document.getElementById(sCanvasName);
var context = canvas.getContext('2d');

var imageCardObj = [];

//vCards contains the images file names
for (var k=0;k<vCards.length;k++){
    imageCardObj[k] = new Image();

    var func = function(){
            var c = arguments[3];
            try{                
                c.drawImage(arguments[0], arguments[1], arguments[2]);
            }catch(e){
                alert(e.message)
            }
        }

        imageCardObj[k].onload = func(imageCardObj[k], x, y, context);

        imageCardObj[k].src = "res/img/"+vCards[k].trim()+".png";   

        x+=40;
    }

解决方案

You are calling the func() handler and gives the result to it to the image's onload handler. That won't work so well.. and you cannot pass arguments that way to a handler function.

Try this:

var func = function(){

    // "this" will be the current image in here

    var c = arguments[3];
    try{                
        c.drawImage(this, x, y); // you need to reference x and y
    }catch(e){
        alert(e.message)
    }
}

imageCardObj[k].onload = func;  // only a reference here

If you need different x and y's then you need to maintain those on the side, either in an additional array or use objects to embed the image, its intended x and y and use the url to identify the image in question inside the func() callback.

Also note that load order may vary as the last image loaded could finish before the first one so when you draw the image they may not appear in the same order.

You may want to do this instead:

var files = [url1, url2, url, ...],
    images = [],
    numOfFiles = files.length,
    count = numOfFiles;

// function to load all images in one go
function loadImages() {

    // go through array of file names
    for(var i = 0; i < numOfFiles; i++) {

        // create an image element
        var img = document.createElement('img');

        // use common loader as we need to count files
        img.onload = imageLoaded;
        //img.onerror = ... handle errors too ...
        //img.onabort = ... handle errors too ...

        img.src = files[i];

        // push image onto array in the same order as file names
        images.push(img);
    }
}
function imageLoaded(e) {

    // for each successful load we count down
    count--;
    if (count === 0) draw(); //start when all images are loaded
}

Then you can start the drawing after the images has loaded - the images are now in the same order as the original array:

function draw() {
    for(var i = 0, img; img = images[i++];)
        ctx.drawImage(img, x, y); // or get x and y from an array
}

Hope this helps!

这篇关于在加载到数组后在画布上绘制图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！