上文写到使用html2Canvas实现截屏。上次留了一个问题，如果当前dom元素对象比较大，比如包含一个比较大的图片等，在将dom序列化成字符串时，极易导致字符串超长。对于超长的内容，后台程序将获取不到参数，那么怎么解决这个问题呢？基本实现思路有三种：1、对dom里的元素瘦身，减少序列化后的参数值长度。存在问题：对于无法再瘦身的dom怎么办？怎么体现通用性(一段代码解决大多数场景)?2、修改web中间件的上传大小限制。存在问题：对web中间件依赖增强，如果需要跨中间件则非常麻烦，通用性太低。3、采用文件上传的思路绕过传统form参数限制。优点：只需要修改表单提交方式，完全实现分离，支持所有平台。缺点：需要前后台支持文件的读写与转换，不过这个成本几乎可以忽略不计。具体实现一、瘦身伪码，思路就是尽量最小化需要序列化的dom元素。
document.getElementById('helpPage').style.display= 'none';//设置隐藏document.getElementById('helpPage').remove();//删除元素tomcat7.0.63之前的版本maxPostSize 设置为 0 或者负数Connector 节点中加入maxPostSize="0" 或者 maxPostSize="-1" tomcat7.0.63之后的版本，需要设置为负数Connector 节点中加入 maxPostSize="-1" 在tomcat文件夹下的conf文件中的server.xml 配置中添加：
maxPostSize="-1" //-1 表示不限制大小
maxPostSize：指定POST方式请求的最大量，没有指定默认为2097152。
function saveAsImageData(){ var userTemplateId = parent.window.templateId; var pic,dataUrl ; var canvas2 = document.createElement("canvas"); //创建一个新的canvas let _canvas = document.querySelector('#main'); //这里面填写 你需要截图的div var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas).height); canvas2.width = w; canvas2.height = h; //将canvas画布放大2倍或者更多，然后盛放在较小的容器内，就显得不模糊了 canvas2.style.width = w + "px"; canvas2.style.height = h + "px"; var context = canvas2.getContext("2d"); context.scale(1, 1); //指图片偏移 html2canvas(document.querySelector('#main'), { //写需要截图的div taintTest: false,useCORS: true,allowTaint: false, //这三串代码解决跨域问题 canvas: canvas2 }).then( function (canvas) { dataUrl = canvas.toDataURL("image/png"); var arr = dataUrl.split(',') var mime = arr[0].match(/:(.*?);/)[1] var suffix = mime.split('/')[1] var bstr = atob(arr[1]) var n = bstr.length var u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } var file = new File([u8arr], `temp_img.${suffix}`, {type: mime}); var formdata = new FormData(); formdata.append("file",file) $.ajax({ url: url,//路径 type: "POST", data: formdata, contentType: false, multiple: true, processData: false, success: function (data) { }, error: function (error) { } }); });}@RequestMapping("fileUpload2") public String fileUpload2(@RequestParam("file") CommonsMultipartFile file) throws IOException { long startTime=System.currentTimeMillis(); System.out.println("fileName："+file.getOriginalFilename()); String path="E:/"+new Date().getTime()+file.getOriginalFilename(); File newFile=new File(path); file.transferTo(newFile); return "/success"; }
