Javascript 将多个图像文件插入画布

下面的代码应该可以找到用户插入到div中的图像，当用户单击“snap”按钮时，它会将这些图像装载到画布对象中的一个图像中。好的我可以在画布中找到图像、定位和调整大小，但图像源总是来自最后找到的图像。有人能帮我分析一下这段代码吗

提前谢谢

<!-- The HTML -->
<div id="content" style="width: 640px; height: 480px;">
    <div class="dragable-div"><img class="resizeable-image" style="position:absolute" src="images/glasses.gif" width="200" height="180" /></div>
    <div class="dragable-div"><img class="resizeable-image" style="position:absolute" src="images/nordic.gif" width="100" height="100" /></div>
</div>


<!-- The JS wich recognizes the images and sends them into the canvas -->
$('#snap').click(function() {

        len = $('#content > div').length;
        for(i = 0; i < len; i++){

            <!-- One '> div' more because the resize method puts one div around the object -->
            ptop = $('#content > div > div').eq(i).offset().top-8;
            pleft = $('#content > div > div').eq(i).offset().left - 8;
            ih = $('#content > div > div').eq(i).height();
            iw = $('#content > div > div').eq(i).width();
            img = $('#content > div > div').eq(i).find('img').attr('src');
            dIm(img, pleft, ptop, iw, ih);

        }

    });

    function dIm(img_source, posLeft, posTop, imWid, imHei){
        base_image = new Image();
        base_image.src = img_source;
        base_image.onload = function(){
            context.drawImage(base_image, posLeft, posTop, imWid, imHei);
        }   
    }

$（“#捕捉”）。单击（函数（）{
len=$（'#content>div'）。长度；
对于（i=0；idiv>div'）.eq（i）.offset（）.top-8；
pleft=$（'#content>div>div'）.eq（i）.offset（）.left-8；
ih=$（'#content>div>div'）.eq（i）.height（）；
iw=$（'#content>div>div'）.eq（i）.width（）；
img=$（'#content>div>div'）.eq（i）.find（'img'）.attr（'src'）；
dIm（img、pleft、ptop、iw、ih）；
}
});
功能dIm（img_源、posLeft、posTop、imWid、imHei）{
基本图像=新图像（）；
base_image.src=img_源；
base_image.onload=函数（）{
drawImage（基本图像、posLeft、posTop、imWid、imHei）；
}   
}

再一次：一切正常；除了图像源，它总是获取#content div中的最后一个图像源

---

提前谢谢

您已经将

base\u image

创建为一个全局变量，因此每次通过函数都会更新相同的引用。将

var

关键字添加到

dIm（）函数中第一次使用的前面

function dIm(img_source, posLeft, posTop, imWid, imHei){
    var base_image = new Image();
    base_image.src = img_source;
    base_image.onload = function(){
        context.drawImage(base_image, posLeft, posTop, imWid, imHei);
    }   
}