Выбор источника изображения на лету

Я пытаюсь получить различный источник изображения на основе массива объектов.Выбор источника изображения на лету

Если человек мужчина, он должен отображать men.png.

Если человек женский, он должен отображать female.png.

Проблема в том, что я получаю только женский.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>

источник

2016-01-15 Kishor Bhandari

Ссылка на jsfiddle будет большой матом .. :) –

Лучшей альтернатива предварительно загрузить оба изображения до начала вашего приложения ...

Вот как полностью загрузить оба ваших изображения, прежде чем пытаться привлечь их:

Поместите свои изображения в массив.
Прокрутите массив адресов и создайте новый объект изображения для каждого URL-адреса.
Задайте каждый объект изображения src из массива URL.
Набор onload обратного вызова для каждого изображения к общей функции (f.ex: 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; }

<canvas id="canvas" width=600 height=150></canvas>

источник

2016-01-15 07:31:19 markE

Спасибо Марка, что решить мою проблему :) –

Выбор источника изображения на лету

ответ

Смежные вопросы