我有下面的代码,应该找到用户插入到 div 中的图像,当他单击“捕捉”按钮时,它将这些图像安装到 Canvas 对象内的一个图像中。美好的。我可以在 Canvas 内找到图像、位置和调整大小,但图像源始终来自找到的最后一个图像。请问有人可以帮我分析一下这段代码吗?
提前致谢。
<!-- 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);
}
}
再一次:一切正常;除了图像源之外,它始终获取 #content div 内的最后一个图像源。
提前致谢!
最佳答案
您已将 base_image
创建为全局变量,因此每次通过该函数都会更新相同的引用。在 dIm()
函数中第一次使用的前面添加 var
关键字。
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);
}
}
关于javascript - 将多个图像文件插入 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16906418/