html后台截图,html2canvas截取图片发送后台

div{height:800px;}

.box1{background:red;}

.box2{background:blue;}

.box3{background:green;}

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});

}