html2canvas是将html代码转换成为图片的插件,本主亲测,觉得效果不错,其官网为:http://html2canvas.hertzen.com/
第一步:将html转化成canvas
第一步很简单,只要传入一个元素即可,如:
html2canvas(document.body).then(
function
(canvas) {
document.body.appendChild(canvas);
});
注:传入的元素不能是JQ对象而是原生的JS对象。
第二步:将canvas转化为图片
利用toDataURL方法进行转换:var imageData = canvas.toDataURL("image/jpeg");
其中,imageData 得到的是一串base64编码。
第三步:将base64转换成图片文件传给后台
编写一个base64编码转换成blob对象的方法:
function getBlobBydataURI(dataURI,type){
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type:type });
}
发请求:
var formData = new FormData();
var $Blob= getBlobBydataURI(imageData,'image/jpeg');
formData.append('file',$Blob);
var timestamp = new Date().getTime();
formData.append('key',timestamp + '.png');//得到以当前时间命名的图片文件
for (var pair of formData.entries()) {
if(typeof value == 'object'){
if(value.hasOwnProperty("name")){
pair[1].name = "1.jpg"
}
}
}
$.ajax({
url:ip + ' ',//接口
type:'post',
data:formData,
async: true,
crossDomain: true,
contentType: false,
processData: false,
success: function(data){
}
});
这样就大功告成了!
以上方法是将当前窗口可视的页面全都给截下来了,如果你想截指定元素的图,那么就把html2canvas(document.body)里面的元素换成指定的元素,但是,有的人会遇到图截不完整咋办?不要着急,这是因为官网上提供的dom抓取不支持高度,会造成只可以截到浏览器可见的,解决的方法是把将要截图的元素克隆一份,放到另外的元素中,设置position: absolute;z-index: 0;z-index要设置到最小即可
var height = $(".oldDiv").height()
//克隆节点,默认为false,不复制方法属性,为true是全部复制。
var cloneDom = $(".newDiv").clone(true);
//设置克隆节点的css属性,因为之前的层级为0,我们只需要比被克隆的节点层级低即可。
cloneDom.css({
"background-color": "white",
"position": "absolute",
"top": "0px",
"z-index": "-1",
"height": height
});
//将克隆节点动态追加到body后面。
$("body").append(cloneDom);
完整的代码如下:
var height = $(".oldDiv").height()
//克隆节点,默认为false,不复制方法属性,为true是全部复制。
var cloneDom = $(".newDiv").clone(true);
//设置克隆节点的css属性,因为之前的层级为0,我们只需要比被克隆的节点层级低即可。
cloneDom.css({
"background-color": "white",
"position": "absolute",
"top": "0px",
"z-index": "-1",
"height": height
});
//将克隆节点动态追加到body后面。
$("body").append(cloneDom);
html2canvas(cloneDom[0]).then(function(canvas){
function getBlobBydataURI(dataURI,type){
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type:type });
}
var imageData = canvas.toDataURL("image/jpeg");
var formData = new FormData();
var $Blob= getBlobBydataURI(imageData,'image/jpeg');
formData.append('file',$Blob);
var timestamp = new Date().getTime();
formData.append('key',timestamp + '.png');//得到以当前时间命名的图片文件
for (var pair of formData.entries()) {
if(typeof value == 'object'){
if(value.hasOwnProperty("name")){
pair[1].name = "1.jpg"
}
}
}
$.ajax({
url:api.url,
type:'post',
data:formData,
async: true,
crossDomain: true,
contentType: false,
processData: false,
success: function(data){
}
});
})