将多个图像文件插入画布
Inserting multiple image files into canvas
我有下面的代码,应该找到用户插入到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);
}
}
再说一遍:一切都很好;除了图片源,它总是在#contentdiv中获取最后一个图片源。
提前感谢!
您已经将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);
}
}
相关文章:
- 为什么不't我的ruby代码与javascript文件一起插入
- 通过javascript以编程方式将文件插入HTML输入
- Sails.js指定要从自动插入中排除的js文件
- 如何使用gulp-inject将文件的内容插入到我的index.html中
- Grunt排除在生成过程中插入某些文件
- 如何从地图导出图像并将其插入到新的PDF文件中
- 将href类插入JS文件(使用createLink)任何想法
- 从.js文件中读取所有代码并插入到 Jade 模板中
- 使用 pur Html 和 Javascript 将文件插入数据库
- 将文件插入到另一个输入的输入
- 我可以使用gulp将一个文件中的内容插入另一个文件吗
- 如何将javascript文件插入到iframe中,然后调用插入的javascript中的函数
- Php在csv输出文件中插入转义字符
- 在DOM中以img的形式插入文件输入
- 使用grunt以正确的顺序插入ember文件
- 如何在动态插入的html文件中使用onload事件
- 如何在Web SQL数据库中逐行插入文本文件
- 动态插入文件时触发 onload 属性.js
- Chrome问题-AJAX插入文件输入未上传文件
- 使用loadFrameScript,如何在页面前插入文件's脚本执行