開始:? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 最終結(jié)果:? ? ? ? ??

?文章來源地址http://www.zghlxwxcb.cn/news/detail-646672.html

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

1.?html2canvas方法生成的圖片地址已Base64編碼形式放在img標(biāo)簽src中可直接展示生成的圖片(注意頁面標(biāo)簽獲取位置,還有個(gè)setTimeout頁面渲染需要時(shí)間)

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. 直接發(fā)給后端存儲也可以? 但是不嚴(yán)謹(jǐn)而且 Base64編碼很長,有一個(gè)文件那么長? (正常已二進(jìn)制file流的形式傳輸),所以我們要把Base64編碼變成二進(jìn)制流的形式,也是查了很多資料,踩了很多坑,做了很多嘗試,最終成功和大家分享一下

? ?2-1. 需要先把生成的Base64編碼轉(zhuǎn)成blob(查了很多,網(wǎng)上這個(gè)方法都很統(tǒng)一,所以不會出大問題,以至于這個(gè)blob是什么不太懂 , 能用就行呀)

下邊是var一個(gè):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 })
  }

在這個(gè)位置調(diào)用?? ↓↓↓↓↓↓↓↓↓↓↓↓

? ? ? ??2-2. 再把生成的blob轉(zhuǎn)成二進(jìn)制流(查了很多,網(wǎng)上這個(gè)方法都很雜,所以當(dāng)時(shí)很蒙,只能不斷嘗試,各種踩坑,最終功夫不負(fù)有心人)

把blob轉(zhuǎn)成二進(jìn)制流的方法(這個(gè)東西打印有自己的方法,log打印不出來,想提升的同學(xué)再去多查查吧,今天不在這里說了

const formData = new FormData()
      formData.append('file',blob) 

直接寫在這個(gè)位置就能用??↓↓↓↓↓↓↓↓↓↓↓↓

OK,現(xiàn)在二進(jìn)制流已生成 ,萬事俱備(直接把formData作為參數(shù)傳進(jìn)接口里就可以用了)

接下來老規(guī)矩上完整代碼? 復(fù)制粘貼可用的(我用的是angular項(xiàng)目所以比較老,自己改一下紅色方框位置,放接口就好)

圖例:

代碼:可復(fù)制

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)

大功告成,在大前端的路上又有點(diǎn)進(jìn)步

?

到了這里，關(guān)于html2canvas生成圖片地址Base64格式轉(zhuǎn)成blob在轉(zhuǎn)成file(二進(jìn)制)可正常發(fā)送(保姆教程,復(fù)制粘貼可用)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！