Jquery <Canvas>绘制了几幅图像
Jquery <Canvas>绘制了几幅图像
提问于 2013-03-07 03:24:10
我使用Spring，我有一个表单可以搜索数据库中的记录并将记录列表返回到另一个页面。然而，返回的数据在标记上绘制图像。只有第一个图像是在表单上绘制的，其余的则不是。我知道这与jquery循环中的闭包有关，但是在这里我如何克服它呢？
对jscript做了一些编辑，但是在所有的画布上只显示了第一个图像。
JavaScript:
$(Document).ready(函数(){)
$(".photos").each(function(i){
if ($(this).val() != '') {
alert($(this).val());
var image = new Image();
var foto = $(".photos").val();
image.src = $(".photos").val();
image.onload = function(){
//var foto = $(".photos").val();
//image.src = $(".photos").val();
$(".canvas").each(function(i){
var ctx = document.getElementsByClassName("canvas")[i].getContext('2d');
ctx.drawImage(image,0,0, 320, 240);
});
}
}
});
});
CitizenList.jsp
<title>Citizen Search Results</title>
</head>
<body>
<c:forEach items="${citizens}" var="citizen">
<div><p><canvas class="canvas" height="240" width="320"></canvas></div>
First name:- ${citizen.fName} , Last Name:- ${citizen.lName}
<input type="text" value="${citizen.photo}" class="photos"/>
</c:forEach>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2013-03-09 01:24:35
图像源需要引用$(this).val()。不需要迭代每个画布，但是只需要使用索引来移动到当前画布。在已完成的解决方案下：
<script type="text/javascript">
$(document).ready(function() {
$(".photos").each(function(i){
if ($(this).val() != '') {
var image = new Image();
image.src = $(this).val();
image.onload = function(){
var ctx = document.getElementsByClassName("canvas")[i].getContext('2d');
ctx.drawImage(image,0,0, 320, 240);
}
}
});
});
</script>Stack Overflow用户
发布于 2013-03-08 17:39:35
您可以使用一个id多次创建photo输入框。
<input type="text" id="photo" value="${citizen.photo}"/>在一个foreach里面。
<c:forEach items="${citizens}" var="citizen">它将以如下方式呈现html：
<div><p><canvas id="canvas" height="240" width="320"></canvas></div>
First name:-Jim , Last Name:- Doe
<input type="text" id="photo" value="xyz"/>
<div><p><canvas id="canvas" height="240" width="320"></canvas></div>
First name:- Bob , Last Name:- Doe
<input type="text" id="photo" value="abc"/>当然，您的jQuery查找$("#photo")只与第一个匹配。
相反，您可以给它们一个类并迭代它们：
<input type="text" id="photo${status.id}" class="photo" value="${citizen.photo}"/>并使用jQuery foreach迭代它们。
$('.photo').each(function(){ //..页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15262528
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号