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