首次加载的图像不显示在画布上答案

【问题标题】：Images on first load don't show on canvas首次加载的图像不显示在画布上
【发布时间】：2016-08-26 06:04:47
【问题描述】：

我想传递一个图像列表并为画布绘制每个图像。

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

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

编辑：在评论中说要使用 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);

  };
};

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

【问题讨论】：

你需要使用image.onload = function(){....事件来等待图片加载。如果这并不总是有效，那么您可以使用image.onerror = function(){... 查看加载是否有问题，或使用开发工具查看发生了什么。
用结果编辑了我的问题

标签： javascript django image canvas

【解决方案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);        
  });
}

【讨论】：