CODEWITHSUNDEEP
javascriptdjangoimagecanvas
fabio
fabio

Reputation: 1365

Images on first load don't show on canvas

I want to pass a list of images and draw them each one for canvas.

My 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)

My 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 %}

My 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);
  };
};

This code works but sometimes the images show, sometimes don't (all of them or no one). When I load the page they don't show, when I re-load the page they show up. If I wait some minutes and re-load they don't show again.

I'm using firefox and in the console log when say GET image_name.png HTTP/1.0 200 they don't show (sometimes they are in cache, sometimes not... it don't make difference), when it don't say nothing they show.

I tried:

-setTimeout

-call the list with an ajax request with cache: false, async: false

-base.onload, like that:

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

but or the images don't show never or they show in this way. I can give details, of course I can have done errors.

Edit: in the comment say to use onload.

My 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);

  };
};

It draws only the last image on the last canvas (I have many canvas and I draw an image for each).

Upvotes: 0

Views: 79

Answers (1)

Blindman67
Blindman67

Reputation: 54069

This will not work because you keep overwriting the image for every iteration of the loop. There is only one variable called base, it can only hold one image so all the ones before it are lost.

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);

  };
};

Use a function to wrap all the required vars so that you create a unique set for each image.

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);        
  });
}

Upvotes: 1

Related Questions