html canvas 上传图片,html2canvas生成图片并上传后台

$(document).click(function(){

html2canvas(document.getElementById("canva")).then(function(canvas) {

document.body.appendChild(canvas);

var blob = getBlob(canvas);

var fd=new FormData();

fd.append('imgFile',blob,'image.png');

fd.append("type",3);

ajax.post('/upload/img',{

data:fd,

contentType: false, //不可缺

processData: false, //不可缺

success:function(data){

var data1 = {'cover':data.data[0]};

},

error:function(XMLHttpRequest, textStatus, errorThrown){

console.log(textStatus);

}

});

});

})

function getBlob(canvas){ //获取blob对象

var data = canvas.toDataURL("image/jpeg", 1);

data = data.split(',')[1];

data = window.atob(data);

var ia = new Uint8Array(data.length);

for(var i = 0; i < data.length; i++) {

ia[i] = data.charCodeAt(i);

}

return new Blob([ia], {

type: "image/jpeg"

});

}

})

//获取地址栏参数//可以是中文参数

function getUrlParam(key) {

var url = window.location.search;

var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");

var result = url.substr(1).match(reg);

return result ? decodeURIComponent(result[2]) : null;

}

参考文档 http://caibaojian.com/html2canvas.html

官方文档 http://html2canvas.hertzen.com/?utm_source=caibaojian.com