成都建设网站费用,做网站文字编辑工作好不好,宁波建站方案,wordpress文学模版上文写到使用html2Canvas实现截屏。上次留了一个问题#xff0c;如果当前dom元素对象比较大#xff0c;比如包含一个比较大的图片等#xff0c;在将dom序列化成字符串时#xff0c;极易导致字符串超长。对于超长的内容#xff0c;后台程序将获取不到参数#xff0c;那么怎… 上文写到使用html2Canvas实现截屏。上次留了一个问题如果当前dom元素对象比较大比如包含一个比较大的图片等在将dom序列化成字符串时极易导致字符串超长。对于超长的内容后台程序将获取不到参数那么怎么解决这个问题呢基本实现思路有三种1、对dom里的元素瘦身减少序列化后的参数值长度。存在问题对于无法再瘦身的dom怎么办怎么体现通用性(一段代码解决大多数场景)?2、修改web中间件的上传大小限制。存在问题对web中间件依赖增强如果需要跨中间件则非常麻烦通用性太低。3、采用文件上传的思路绕过传统form参数限制。优点只需要修改表单提交方式完全实现分离支持所有平台。缺点需要前后台支持文件的读写与转换不过这个成本几乎可以忽略不计。具体实现一、瘦身伪码思路就是尽量最小化需要序列化的dom元素。document.getElementById(helpPage).style.display none;//设置隐藏document.getElementById(helpPage).remove();//删除元素二、设置服务中间件参数限制以tomcat为例。tomcat7.0.63之前的版本maxPostSize 设置为 0 或者负数Connector 节点中加入maxPostSize0 或者 maxPostSize-1 tomcat7.0.63之后的版本需要设置为负数Connector 节点中加入 maxPostSize-1 在tomcat文件夹下的conf文件中的server.xml 配置中添加maxPostSize-1 //-1 表示不限制大小maxPostSize指定POST方式请求的最大量没有指定默认为2097152。三、前端序列化成file使用文件上传的方式提交后台。前台基本代码如下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 startTimeSystem.currentTimeMillis(); System.out.println(fileNamefile.getOriginalFilename()); String pathE:/new Date().getTime()file.getOriginalFilename(); File newFilenew File(path); file.transferTo(newFile); return /success; }本文阐述了在使用html2Canvas时遇到序列化字符太大无法完成提交的问题的解决方案。分析了各个方案的适用场景和具体实现思路。当然可能还有更好的实现方式欢迎交流讨论。
