<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{height:800px;}
.box1{background:red;}
.box2{background:blue;}
.box3{background:green;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<script type="text/javascript" src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
<script type="text/javascript">
html2canvas(document.body).then(function(canvas) {
//document.body.appendChild(canvas);
var saveImage = canvas.toDataURL('image/jpg');
var fd = new FormData();
var blob = dataURItoBlob(saveImage);
fd.append('file', blob, Date.now() + '.jpg');
$.ajax({
url: "/api/fileUpload.do",
type:'post',
processData: false, // 不会将 data 参数序列化字符串
contentType: false, // 参数格式，默认JSON.把他干掉
data: fd ,
success:function (data){
//Do something
}
});
});
function dataURItoBlob(dataURI) {//base64转buffer
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
}
</script>
</body>
</html>
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。