有什么办法能用自执行里的变量
我想获取base64 = ss.toDataURL('image/jpeg')输出的值
不过下面自执行的时候变量base64是无法存储到他的值的，
有什么办法解决?
<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
body{text-align:center;}
.showimg{width:200px;height:200px;overflow:hidden;position:relative;margin:100px auto;}
.showimg .imgtest{position:absolute;}
.showimg .a1{top:30px;left:30px;}
.showimg .a2{top:90px;left:120px;}
</style>
<script type="text/javascript" src="jquery.1.9.1.min.js"></script>
<body>
<canvas id="ss" width="200" height='200'></canvas>
<div class="showimg">
<img src='service.jpg' width="200" height="200" />
<img class="imgtest a1" src='service.jpg' width="20" height="20" />
<img class="imgtest a2" src='service.jpg' width="20" height="20" />
</div>
<script type="text/javascript">
$(function(){
var showimg = $('.showimg').find('img');
var ss = document.getElementById('ss');
var ctx = ss.getContext('2d');
var base64;
for(var i = 0; i < showimg.length; i++){
var offleft = $(showimg[i]).offset().left - showimg.offset().left;
var offtop = $(showimg[i]).offset().top - showimg.offset().top;
var owidth = $(showimg[i]).width();
var oheight = $(showimg[i]).height();
var images = new Image();
images.src = showimg[i].src;
(function(a,l,t,w,h){
images.onload = function(){
ctx.drawImage(images,l,t,w,h)
base64 = ss.toDataURL('image/jpeg')
}
})(i,offleft,offtop,owidth,oheight)
}
console.log(base64)//undefined;
})
</script>
</body>
</html>
展开
收起
1
条回答
写回答
写回答
-
这和js代码执行顺序有关，执行console.log(base64)的时候，images.onload的事件还没触发，在onload里面传入一个callback。
2019-07-17 18:59:51赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
