<script type="text/javascript" src="js/html2canvas.js"></script> //布局截图 $(function(){ //布局截图 function htmlCanvas(){ html2canvas($(".J_screenshot"), { onrendered: function(canvas){ // document.body.appendChild(canvas); var img = canvas.toDataURL(); var base=encodeURIComponent(img);//转码 // console.log(img); //在console中会输出图片的路径,然后复制在浏览器一粘贴,就可以看到。 //上传截图 ajaxUpLoad(base); }, //300, //height:300 }); }; function ajaxUpLoad(base){ $.ajax({ type: "POST", url: "", async: true, data: {base:base}, dataType: "json", success: function (data) { }, error: function (err) { } }); } })
我们利用html2canvas的功能,得到了规定区域的页面截图,返回的是base64格式的图片,然后用ajax上传,要关注的点是base64要用encodeURIComponent()转义后才能传输。