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

此代码有效但有时图像显示，有时不显示（全部或全部）。当我加载他们没有显示的页面时，当我重新加载他们出现的页面时。如果我等待几分钟并重新加载它们就不再显示了。

我正在使用firefox并在控制台日志中说GET image_name.png HTTP/1.0 200时他们没有显示（有时它们在缓存中，有时候不是......它没有区别），当它没有他们没有说什么。

我试过了：

- setTimeout

- 使用ajax cache: false，async: false

的base.onload请求列出清单

- base.onload = function(){ ctx.scale(0.5,0.5); ctx.drawImage(base, 0, 0); }，就像那样：

script.js

但是图像不会显示从不显示或以这种方式显示。我可以提供详细信息，当然我可以做错。

编辑：在评论中说要使用onload。

我的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); }; };：

interface IFragmentSpecificStuffHandler{
    void visit( Activity visitor); // You may use another Interface that your Activity implements to allow the Fragment to make specific callbacks or initiate state-changes in the activity specific to this functionality.
}

它只绘制最后一个画布上的最后一个图像（我有很多画布，我为每个画布画一个图像）。

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

第一次加载时的图像不会显示在画布上

1 个答案: