我想把 console.log(ss.toDataURL('image/jpeg'));
放到images.onload里输出既然报错
放到外面输出又是黑色的图片背景，这是怎么回事?
<!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');
for(var i = 0; i < showimg.length; i++){
var images = new Image();
images.src = showimg[i].src;
if(i === 0){
images.onload = function(){
ctx.drawImage(images,0,0,200,200);
}
}else if (i === 1){
images.onload = function(){
ctx.drawImage(images,60,65,20,20);
}
}else if (i === 2){
images.onload = function(){
ctx.drawImage(images,100,100,20,20);
}
}
}
console.log(ss.toDataURL('image/jpeg'));
})
</script>
</body>
</html>toDataURL放到外面去了，你图片都还没加载完回调，此时拿到的就是一个没图片的canvas,所以背景空白(没内容)。
至于放到onload是不是报这样的错？
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
尝试下本地弄个web服务来启动这个页面吧，这里涉及到读取图片似乎有跨域的问题，前阵子也遇到过，启动个本地服务来访问这个页面保证图片跟页面在同域下就可以了。
参考链接>>