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

你可能感兴趣的:(javascript)