최초로드시 이미지가 캔버스에 표시되지 않습니다.

Question

이미지 목록을 전달하고 각각 캔버스 용으로 그려야합니다.

내 view.py :

def myview(request): 
    ...  
    lista=Myobject.objects.filter(tipo=mytipo) 
    numero_oggetti = range(len(lista)) 
    lista_formattata=[] 
    for elem in lista: 
     lista_formattata.append('/media/'+str(elem.myfield)) 
    context_dict['lista']=lista_formattata 
    context_dict['numero_oggetti']=numero_oggetti 
    return render(request, 'mytemplate.html', context_dict) 

내 template.html :

<script> 
    <!-- 
    window.onpageshow = function() { 
     myfunction({{lista|safe}}); 
    }; 
    --> 
    </script> 

    {% for c in numero_oggetti %} 
    <canvas id='componenti_canvas{{ c }}' width='60' height='75' style="border:1px solid #000000;"> 
     Your browser does not support the HTML5 canvas tag. 
    </canvas> 
    {% endfor %} 

내 script.js :

function myfunction(lista) { 
    lista=lista 
    for (i=0; i<lista.length; i++) { 
    var canvas = document.getElementById('componenti_canvas'+i); 
    var ctx = canvas.getContext("2d"); 
    var base = new Image(); 
    base.src = lista[i]; 
    ctx.scale(0.5,0.5); 
    ctx.drawImage(base, 0, 0); 
    }; 
}; 

이 코드가 작동하지만 때로는 이미지가 때로는하지 (모든 수행 보여 그들 또는 아무도). 그들이 표시하지 않는 페이지를로드하면 페이지를 다시로드 할 때 표시됩니다. 잠시 후 다시로드하면 다시 표시되지 않습니다.

나는 콘솔의 로그에 GET image_name.png HTTP/1.0 200이 표시되지 않을 때 (때로는 캐시에 있고 때로는 ... 차이가 없음), 아무 것도 말하지 않을 때 콘솔 로그에 표시됩니다 보여 주다. - cache: false과 ajax 요청 목록 울어 setTimeout

, async: false

-

같은 base.onload, :

나는 시도

base.onload = function(){ 
    ctx.scale(0.5,0.5); 
    ctx.drawImage(base, 0, 0); 
} 

을하지만, 또는 이미지 결코 보여주지 않거나 이런 식으로 보여줍니다. 세부 사항을 알려줄 수는 있지만 물론 오류를 범할 수 있습니다.

: 의견에 onload를 사용하는 것이 좋습니다. 내 script.js

: 그것은 마지막 캔버스에 마지막 이미지를 그립니다

function myfunction(lista) { 
    lista=lista 
    for (i=0; i<lista.length; i++) { 
    var canvas = document.getElementById('componenti_canvas'+i); 
    var ctx = canvas.getContext("2d"); 
    var base = new Image(); 

    base.onload = function() { 
     ctx.drawImage(base, 0, 0); 
    }; 

    base.src = lista[i]; 
    ctx.scale(0.5,0.5); 

    }; 
}; 

(나는 많은 캔버스를 가지고 있고 각각에 대한 이미지를 그릴).

Answer 1

루프의 반복마다 이미지를 덮어 쓰므로이 기능이 작동하지 않습니다. base라는 변수는 하나 뿐이므로 하나의 이미지 만 포함 할 수 있으므로 모든 이미지가 손실됩니다.

function myfunction(lista) { 
    lista=lista 
    for (i=0; i<lista.length; i++) { 
    var canvas = document.getElementById('componenti_canvas'+i); 
    var ctx = canvas.getContext("2d"); 
    var base = new Image(); // second and more loops you over write base 

    base.onload = function() { 
     ctx.drawImage(base, 0, 0); // when it load only the last image is in base 
            // there is only one var called base so it 
            // can not hold more than one image 
    }; 

    base.src = lista[i]; 
    ctx.scale(0.5,0.5); 

    }; 
}; 

각 이미지에 대해 고유 한 세트를 만들 수 있도록 필요한 모든 병을 래핑하는 함수를 사용하십시오.

function myfunction(lista) { 
    lista.forEach((name,i)=>{ // each time the call back is called a 
           // new set of variables are created to 
           // store each unique image.         
    var base = new Image(); 
    base.src = name; 
    base.onload = function() { ctx.drawImage(base, 0, 0); }; 

    var canvas = document.getElementById('componenti_canvas'+i); 
    var ctx = canvas.getContext("2d");  
    ctx.scale(0.5,0.5);   
    }); 
}