Ajax 使用jQuery在几个不同的画布元素上绘制图片

我试图在几个画布上绘制从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>          

受害者

罪犯

---

不要在

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

---

循环中闭包的绝佳解决方案。当您进行ajax调用时，您无法访问回调/成功函数中的索引值。要避免ajax函数中使用的索引的范围问题，您要做的是存储索引值，然后使其在回调函数中可用

---

循环中闭包的绝佳解决方案。在进行ajax调用时，您无法访问callback/success函数中的索引值。下面是我对这个问题的解决方案：

代码

基本上，这就成功了-valueOfi

---

这仍然将所有图片放在一个画布上我可以看到所有图像都被绘制到同一画布上我为每个项目都有一个画布，class name=canvas需要一种方法用于ajax请求的每次迭代，以将图像绘制到与索引相对应的画布索引“i”在成功函数中不可访问，无法用于识别哪些内容每个画布都有相同的

photovs

ID？那不太好用。ID应该是唯一的。您可以发布创建画布、公民元素等的HTML或JavaScript代码吗？否则很难猜测。顺便说一句，success函数中提供了

i

变量，但我不建议在不首先查看更多代码的情况下以这种方式使用它。

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

                }                   

            }
        });
    });