上文寫到使用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 節點中加入maxPostSize="0" 或者 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 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"; }本文闡述了在使用html2Canvas時，遇到序列化字符太大無法完成提交的問題的解決方案。分析了各個方案的適用場景和具體實現思路。當然可能還有更好的實現方式，歡迎交流討論。

總結

以上是生活随笔為你收集整理的canvas 实现图片局部模糊_小技巧!H5使用Html2Canvas实现自动截屏（下）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。