圖像未加載，但未在HTML畫布上顯示

Question

我正在加載的網站上顯示HTML畫布元素的編譯圖像。我的問題是，我無法分辨何時加載圖像以將其繪製到畫布上，或者在繼續下一步之前如何強制加載圖像。我一直在關注這個主題的前幾篇文章，並嘗試了很多不同的解決方案，但沒有任何工作適合我。

我使用的是web2py，所以我使用了一些在服務器端運行的Python幫助程序。

當我使用這個：

canvas = document.getElementById('canvas'); 
context = canvas.getContext('2d'); 
image1 = new Image(); 
image1.src = '{{=URL('static', 'images/image-wrap-border-land.png')}}'; //resolves to: '/SNotes/static/images/image-wrap-border-land.png' 
image1.onload = function() { 
    context.drawImage(image1, 0, 0, canvas.width, canvas.height); 
}; 

由於沒有加載圖像，在onload函數不會做任何事情，它跳過它。在設置源代碼之前，我也嘗試過使用onload函數，但圖像仍未繪製。

我曾嘗試：

//code from above 
if(image1.completed) { 
    context.drawImage(image1, 0, 0, canvas.width, canvas.height); 
} 

但都面臨着同樣的問題。

我也看過圖像在加載時產生錯誤的可能性。爲了趕上這一點，我寫道：

//code from above 
image1.onerror = function() { 
    console.log('error'); 
} 

但圖像源是好的，圖像不會產生一個錯誤，它只是花費很長的時間來加載。

是否有一種方法可以在圖像被繪製到畫布之前等待圖像加載？

---

編輯補充特異性：

我的HTML看起來像這樣：

<div id="profile-container" class="container-fluid"> 
    <h1>My Notes</h1> 
    <div id="empty-orders" class="column-wrapper disable" style="padding-top: 5px; margin: 0 38%;"> 
     <h3>Create a Note and it will appear here</h3> 
     <button class="btn btn-lg btn-outline">{{=A('GET STARTED', _href=URL('default', 'canvas_board_print'))}}</button> 
    </div> 
    <div id="loading" class="column-wrapper"> 
     <i class="fa fa-cog fa-spin fa-3x fa-fw"></i> 
    </div> 
    <div id="row1" class="row"> 

    </div> 
</div> 

我的JavaScript看起來像這樣：

function showOrders(note_orders) { 
    var orders = note_orders; 
    //console.log(orders); 
    var row_num = 1; 
    var node_num = 1; 
    if(orders.length > 0) { 
     for (var i = 0; i != orders.length; i++) { 
      orders[i].border = JSON.parse(orders[i].border); 
      orders[i].image_retouching = JSON.parse(orders[i].image_retouching); 
      orders[i].shipping_info = JSON.parse(orders[i].shipping_info); 
      var new_node = $("<div>", {id: "node" + node_num, "class": "col-xs-3 node-wrapper"}); 
      var new_canvas = $('<canvas>', {id: "canvas" + node_num, style: 'display: none'}); 
      var new_image = $('<img>', {id: "note_prev" + node_num, 'class': 'img-responsive'}); 
      $('#row' + row_num).append(new_node); 
      $('#node'+ node_num).append(new_canvas).append(new_image).append(processOrders(orders[i], node_num)); 
      node_num++; 
      if (i != 0 && (i + 1) % 4 == 0) { 
       row_num++; 
       var new_row = $("<div>", {id: "row" + row_num, "class": "row"}); 
       $(' #profile-container ').append(new_row); 
      } 
     } 
     $(' #loading ').addClass('disable'); 
    } else { 
     $(' #loading ').addClass('disable'); 
     $(' #empty-orders ').removeClass('disable'); 
    } 
} 
function processOrders(curr_order, node_num) { 
    var canvas = document.getElementById('canvas' + node_num); 
    var context = canvas.getContext('2d'); 

    var image1 = new Image(); 
    image1.src = curr_order.image_url; 
    canvas.width = image1.naturalWidth; 
    canvas.height = image1.naturalHeight; 
    if(image1.complete) { 
     context.drawImage(image1, 0, 0, canvas.width, canvas.height); 
     if(curr_order.border.style == 'color_wrap') { 
      document.getElementById('note_prev' + node_num).style.border = "10px solid " + curr_order.border.color; 
     } else if(curr_order.border.style == 'image_wrap') { 
      var image_wrap = new Image(); 
      if(canvas.width > canvas.height) { 
       image_wrap.src = '{{=URL('static', 'images/image-wrap-border-land.png')}}'; 
      } else { 
       image_wrap.src = '{{=URL('static', 'images/image-wrap-border-port.png')}}'; 
      } 
      console.log(image_wrap); 
      image_wrap.onload = function() { 
       context.drawImage(image_wrap, 0, 0, canvas.width, canvas.height); 
      }; 
      image_wrap.onerror = function() { 
       console.log('errors'); 
      } 
     } 
    } 
    document.getElementById('note_prev' + node_num).src = canvas.toDataURL('image/png'); 
    var node_div = document.createElement('div'); 
    //Other non-image informantion is appended to node_div 
    return node_div; 
} 

我的問題是繪製image_wrap時，不image1從我上面的例子。 Image1從我的代碼繪製得很好，但是當它被繪製到畫布時，image_wrap不會出現。

---

我固定了!!!

我移動了image_Wrap變量的創建，並創建了image1變量。

function processOrders(curr_order, node_num) { 
    var canvas = document.getElementById('canvas' + node_num); 
    var context = canvas.getContext('2d'); 

    var image1 = new Image(); 
    var image_wrap = new Image(); 
    image1.src = curr_order.image_url; 
    canvas.width = image1.naturalWidth; 
    canvas.height = image1.naturalHeight; 
    if(image1.complete) { 
     context.drawImage(image 

我想這不會是因爲我不想創建額外的變量，即使他們不會習慣是個好主意，但我想它固定它。

Answer 1

爲context.drawImage第一個參數是要繪製的圖像，第二兩個在上下文中的位置....

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 

其餘參數允許您縮放圖像。

建議你試試..

image1.onload = function() { context.drawImage(image1,0,0); } 

Answer 2

我能夠使用您的代碼加載圖像。

您是否確定在加載圖像時沒有收到錯誤？

（尋求澄清：張貼的答案，演示運行的代碼片段）

更新：增加了一個hackish的方式來等待第二加載圖像後繪製它以帆布

前

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var image1 = new Image(); 
 

 
image1.src = 'http://lorempixel.com/400/200/sports/1/'; 
 
image1.onload = function() { 
 
    // you could draw the image right away 
 
    // ctx.drawImage(image1, 0, 0, canvas.width, canvas.height); 
 

 
    // OR 
 
    // You could wait for an extra second before drawing the image (hackish, I know) 
 
    setTimeout(function() { 
 
    ctx.drawImage(image1, 0, 0, canvas.width, canvas.height); 
 
    }, 1 * 1000); // 1 second (in milliseconds) 
 
};

<h2>canvas</h2> 
 
<canvas id='canvas'> 
 
</canvas> 
 
<hr/>

Answer 3

集T他在你設置src之前加載函數。在設置onload函數之前，圖像可能已加載。

canvas = document.getElementById('canvas'); 
context = canvas.getContext('2d'); 
image1 = new Image(); 
image1.onload = function() { 
    context.drawImage(image1, 0, 0, canvas.width, canvas.height); 
}; 
image1.src = '{{=URL('static', 'images/image-wrap-border-land.png')}}'; //resolves to: '/SNotes/static/images/image-wrap-border-land.png'