利用html2canvas截图,得到base64上传ajax
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | < 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); }, //width: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()转义后才能传输。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步