即时选择图像源答案

【问题标题】：Selecting image source on the fly即时选择图像源
【发布时间】：2023-03-12 00:25:01
【问题描述】：

我正在尝试根据对象数组获取不同的图像来源。

如果一个人是男性，它应该显示 men.png。

如果一个人是女性，它应该显示 female.png。

问题是我在画布中只得到了 female.png。

另一个问题是我的回调函数没有按循环变量的顺序调用。

这里是代码。

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div>
<canvas id ="canvas3" width="1100" height="100" ></canvas>
</div>
<script>


var person = [{name:" Mr.Ram T",gender:"Male"}, {name:" Dr.Shila G", gender:"Female"}, {name: " Dr. J Phil", gender:"Male" } , {name:" Mrs. Sita W",gender:"Female"}, {name:" Mrs. Gita W",gender:"Female"}, {name:" Mrs. Rita W",gender:"Female"}];

        function myCallBack(ilocal)
        {
            return function() 
                {   alert(ilocal);
                    ctx.drawImage(img, 10+ilocal*180, 5, 20, 20);
                };
        }


        for (i=0;i<6;i++)
        {
            var canvas = document.getElementById('canvas3');
            var ctx = canvas.getContext('2d');
            var img = new Image();

            if( person[i].gender == "Male")
            {
                img.src = "men.png";
            }
            else
            {
                img.src = "female.png";
            }
            if ( img.complete ) 
            {
            ctx.drawImage(img, 10+i*180, 5, 20, 20);
            }
            else 
            {
            img.onload = myCallBack(i);
            }

        }

</script>
</body>
</html>

【问题讨论】：

一个链接到 jsfiddle 将是伟大的伙伴.. :)

标签： javascript html canvas callback drawimage

【解决方案1】：

更好的选择是在应用启动之前预加载两张图片...

以下是在尝试绘制两张图片之前完全加载它们的方法：

将您的图片网址放在一个数组中。
遍历 urls 数组并为每个 url 创建一个新的图像对象。
从 urls 数组中设置每个图像对象src。
将每个图像的 onload 回调设置为一个通用函数（例如：myCallback）
将每个图像对象添加到图像数组中。
回调函数将为图像数组中的每个图像调用，因此请计算调用回调函数的次数。当它被调用的次数与您拥有的图像对象一样多时，您就知道您已经完全加载了所有图像。
所有图片都已完全加载...在您的代码中使用它们！

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var urls=[
  'https://dl.dropboxusercontent.com/u/139992952/multple/sillouette1.png',
  'https://dl.dropboxusercontent.com/u/139992952/multple/sillouetteWoman.png'
];
var images=[];
var loadedCount=urls.length;
for(var i=0;i<urls.length;i++){
  var image=new Image();
  image.onload=myCallback;
  image.src=urls[i];
  images.push(image);
}
function myCallback(){
  // wait until all images have been fully loaded
  if(--loadedCount>0){return;}
  // Now all images have been loaded into images[] array
  // They are in the same order as the urls[] array
  var person = [
    {name:" Mr.Ram T",gender:"Male"}, 
    {name:" Dr.Shila G", gender:"Female"}, 
    {name: " Dr. J Phil", gender:"Male" } , 
    {name:" Mrs. Sita W",gender:"Female"}, 
    {name:" Mrs. Gita W",gender:"Female"}, 
    {name:" Mrs. Rita W",gender:"Female"}
  ];
  var x=0;
  for(var i=0;i<person.length;i++){
    var p=person[i];
    var genderIndex=(p.gender=='Male')?0:1;
    ctx.drawImage(images[genderIndex],x,0);
    ctx.fillText(p.name,x,125);
    x+=images[genderIndex].width;
  }
}

body{ background-color:white; }
#canvas{border:1px solid red; margin:0 auto; }

&lt;canvas id="canvas" width=600 height=150&gt;&lt;/canvas&gt;

【讨论】：