此问题与：Capture the screenshot of a webpage using html2canvas with png extension
有关
嗨！
这是我在这里的第一篇文章，所以我提前为我在这里犯的任何错误道歉。我正在努力建立一个拖放时间表，志愿者必须提交给权威机构。时间表必须有一个以jpg格式保存的选项。这是我正在使用的程序，但当我点击“保存”按钮时，会打开一个新页面，其中包含“data：;”作为地址
<!DOCTYPE html>
<html>
<head>
<!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">-->
<meta charset="utf-8"/>
<title>NSS BITS PILANI</title>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>-->
<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="html2canvas.js?rev032"></script>
<!--<script src="~/Js/html2canvas.js"></script>-->
<!--<script src="~/Js/jquery.plugin.html2canvas.js"></script>-->
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<script type="text/javascript">
$(window).load(function(){
$('#load').click(function(){
html2canvas($('#testdiv'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = img;
}
});
});
});
</script>
<body>
<img src = "http://s20.postimg.org/art5c3vot/NSS.gif" alt = "NSS BITS Pilani - Pilani Campus">
<h2>Share your timetable</h2>
<div class="info" style="margin-bottom:10px">
<div>Click and drag the correct status of the hour to timetable.</div>
<div style="width:700px;">
<div class="left">
<table>
<tr>
<td><div class="item">Free</div></td>
</tr>
<tr>
<td><div class="item">Busy</div></td>
</tr>
<tr>
<td><div class="item">Lunch</div></td>
</tr>
</table>
</div>
<div id = "testdiv">
<div class="right">
<table>
<tr>
<td class="blank"></td>
<td class="title">Monday</td>
<td class="title">Tuesday</td>
<td class="title">Wednesday</td>
<td class="title">Thursday</td>
<td class="title">Friday</td>
<td class="title">Saturday</td>
</tr>
<tr>
<td class="time">08:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">09:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">10:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">11:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">12:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">1:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">2:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">3:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">4:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">5:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">6:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
</table>
</div>
</div>
<input type="button" value="Save" id="load"/>
</div>
</div>
<style type="text/css">
.left{
width:120px;
float:left;
}
.left table{
background:#E0ECFF;
}
.left td{
background:#eee;
}
.right{
float:right;
width:570px;
}
.right table{
background:#E0ECFF;
width:100%;
}
.right td{
background:#fafafa;
color:#444;
text-align:center;
padding:2px;
}
.right td{
background:#E0ECFF;
}
.right td.drop{
background:#fafafa;
width:100px;
}
.right td.over{
background:#FBEC88;
}
.item{
text-align:center;
border:1px solid #499B33;
background:#fafafa;
color:#444;
width:100px;
}
.assigned{
border:1px solid #BC2A4D;
}
.trash{
background-color:red;
}
</style>
<script>
$(function(){
$('.left .item').draggable({
revert:true,
proxy:'clone'
});
$('.right td.drop').droppable({
onDragEnter:function(){
$(this).addClass('over');
},
onDragLeave:function(){
$(this).removeClass('over');
},
onDrop:function(e,source){
$(this).removeClass('over');
if ($(source).hasClass('assigned')){
$(this).append(source);
} else {
var c = $(source).clone().addClass('assigned');
$(this).empty().append(c);
c.draggable({
revert:true
});
}
}
});
$('.left').droppable({
accept:'.assigned',
onDragEnter:function(e,source){
$(source).addClass('trash');
},
onDragLeave:function(e,source){
$(source).removeClass('trash');
},
onDrop:function(e,source){
$(source).remove();
}
});
});
</script>
</body>
</html>
有人可以指出这种奇怪行为的原因吗？
由于
编辑：如果我注释掉css样式部分，那么网页工作正常......他们是否也可以在屏幕截图中包含CSS样式？