開始:? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 最終結果:? ? ? ? ??
?
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
1.?html2canvas方法生成的圖片地址已Base64編碼形式放在img標簽src中可直接展示生成的圖片(注意頁面標簽獲取位置,還有個setTimeout頁面渲染需要時間)
setTimeout(function () {var result = {};var htmlContent = document.getElementById("cockpit-drag");html2canvas(htmlContent,{background:`${htmlContent.style.backgroundImage}`,useCORS: true,// height:'100%',// scale: 2, // 處理模糊問題// dpi: 300, // 處理模糊問題}).then(function (canvas) {var imgData = canvas.toDataURL('image/png');var img = document.createElement("img");img.src = imgData;console.log(img);document.body.appendChild(img);
},3000)2. 直接發給后端存儲也可以? 但是不嚴謹而且 Base64編碼很長,有一個文件那么長? (正常已二進制file流的形式傳輸),所以我們要把Base64編碼變成二進制流的形式,也是查了很多資料,踩了很多坑,做了很多嘗試,最終成功和大家分享一下
? ?2-1. 需要先把生成的Base64編碼轉成blob(查了很多,網上這個方法都很統一,所以不會出大問題,以至于這個blob是什么不太懂 , 能用就行呀)
下邊是var一個:blob方法 ↓↓↓↓↓↓↓↓↓↓↓↓
var dataURLtoBlob = function (dataurl){var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime })}在這個位置調用?? ↓↓↓↓↓↓↓↓↓↓↓↓
? ? ? ??2-2. 再把生成的blob轉成二進制流(查了很多,網上這個方法都很雜,所以當時很蒙,只能不斷嘗試,各種踩坑,最終功夫不負有心人)
把blob轉成二進制流的方法(這個東西打印有自己的方法,log打印不出來,想提升的同學再去多查查吧,今天不在這里說了
const formData = new FormData()formData.append('file',blob) 直接寫在這個位置就能用??↓↓↓↓↓↓↓↓↓↓↓↓
OK,現在二進制流已生成 ,萬事俱備(直接把formData作為參數傳進接口里就可以用了)
接下來老規矩上完整代碼? 復制粘貼可用的(我用的是angular項目所以比較老,自己改一下紅色方框位置,放接口就好)
圖例:
代碼:可復制
setTimeout(function () {var result = {};var htmlContent = document.getElementById("cockpit-drag");html2canvas(htmlContent,{background:`${htmlContent.style.backgroundImage}`,useCORS: true,// height:'100%',// scale: 2, // 處理模糊問題// dpi: 300, // 處理模糊問題}).then(function (canvas) {var imgData = canvas.toDataURL('image/png');var blob = dataURLtoBlob(imgData);const formData = new FormData()formData.append('file',blob) var xmlhttp = new XMLHttpRequest();xmlhttp.open("POST", url_+"dashboard/uploadImage", false);xmlhttp.send(formData);$scope.$apply(function () {$scope.persistFinish = true;});// var img = document.createElement("img");// img.src = imgData;// console.log(img);// document.body.appendChild(img);});}, 3000)大功告成,在大前端的路上又有點進步
?
)
