使用jQuery在幾個不同的畫布元素上繪製圖片

Question

我試圖在幾個畫布上繪製返回的ajax請求的元素，但它只是將所有圖像繪製到第一個畫布。

如何訪問成功函數中的每個畫布元素來繪製圖像？

jQuery的

$(document).ready(function() { 

    $('.citizen').each(function(i, citizen) { 
     $.ajax({ 
      type : 'GET', 
      url : 'getCitizenPhoto.htm', 
      data : { 
       socialSecurityNumber : $(citizen).val() 
      }, 
      dataType : 'text', 
      success : function(data,i) { 


       var image = new Image(); 
       image.src = data; 
       image.onload = function() { 
        var ctx = document 
        .getElementById("#photoCvs") 
        .getContext('2d'); 
        ctx.drawImage(image, 0, 0, 200, 200); 

       } 
      } 
     }); 
    }); 

HTML

 <p>Victims</p> 

     <c:forEach items="${victimMonitoringList}" var="victims"> 
     <div id="victim_row"> 
<input class="citizen" id= "socialSecurityNumber" value= "${vitims.socialSecurityNumber}"/> 
     <canvas id="photoCvs" class="canvas" height="200" width="200"></canvas> 
     </div> 

     <div id="criminals"> 

     <c:forEach items="${criminalMonitoringList}" var="criminals"> 
     <div id="criminal_row"> 
    <p>Criminals</p> 
    <input class="citizen" id= "socialSecurityNumber" value= "${criminal.socialSecurityNumber}"/> 
     <canvas id="photoCvs" class="canvas" height="200" width="200"></canvas> 
     </div>   

Answer 1

的最佳解決方案。當你製作一個ajax調用你無法訪問回調函數/成功函數中的索引值。想要避免在ajax函數中使用的索引的範圍問題，你想要做什麼來存儲索引然後使其在回調函數中可用。

封閉循環的很好的解決方案。當您進行ajax調用時，您無法訪問回調/成功功能中的索引值。在我解決這個問題：

CODE

基本上這並獲得成功 - valueOfi

$(document).ready(function() { 

     $('.citizen').each(function(i, citizen) { 
     $.ajax({ 
      type : 'GET', 
      url : 'getCitizenPhoto.htm', 
      valueOfi:i, 
      data : { 
       socialSecurityNumber : $(citizen).val() 
      }, 
      dataType : 'text', 
      success : function(data) { 
       i=this.valueOfi; 
       alert(i); 
       var image = new Image(); 
       image.src = data; 
       image.onload = function() { 
       var ctx = document.getElementsByClassName("canvas")[i].getContext('2d'); 
       ctx.drawImage(image, 0, 0, 200, 200); 

       }     

      } 
     }); 
    }); 

Answer 2

不要用你的.each()回調使用隱this。請改用.each()提供的指定參數。

此外，你有兩個一個$(document).ready(function)和一個$(function)嵌套在裏面。你只需要其中的一個。

而且由於您使用的是jQuery，因此您無需使用document.getElementById()。

我推薦一個不太重的嵌套風格。當您編寫.each()或.ready()呼叫等時，回調函數的開頭與.each位於同一行上會有幫助。這消除了您不需要的嵌套級別。

因此，您的實際問題。所有圖像都進入同一個帆布的原因是，就是這個代碼告訴它做的事：

var ctx = document.getElementById("photoCvs").getContext('2d'); 
ctx.drawImage(image, 0, 0,200, 200); 

您有多個元素都有id="photoCvs"，這是不合法的HTML。瀏覽器通常會容忍它，但document.getElementById()只會返回第一個。

有很多不同的方法可以處理這個問題。其一，如果你的HTML按照你所展示的方式用canvas元素作爲.citizen輸入元素的下一個兄弟，就可以使用jQuery的.next()方法。

無論採用哪種方式，請從所有畫布元素中刪除id="photoCvs"。

全部放在一起，你可能最終得到這樣的：在循環的封閉

$(document).ready(function() { 
    $('.citizen').each(function(i, citizen) { 
     $.ajax({ 
      type : 'GET', 
      url : 'getCitizenPhoto.htm', 
      data : { 
       socialSecurityNumber : $(citizen).val() 
      }, 
      dataType : 'text', 
      success : function(data) { 
       var image = new Image(); 
       image.src = data; 
       image.onload = function() { 
        var ctx = $(citizen).next()[0].getContext('2d'); 
        ctx.drawImage(image, 0, 0, 200, 200); 
       } 
      } 
     }); 
    }); 
});